feat: smaller compiled size and Icon component

shinokada · Aug 31, 2023 · 0893d6a · 0893d6a
1 parent 5fdaee5
commit 0893d6a
Show file tree

Hide file tree

Showing 290 changed files with 42,218 additions and 1,152 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -4,6 +4,5 @@
   "trailingComma": "none",
   "printWidth": 100,
   "plugins": ["prettier-plugin-svelte"],
-  "pluginSearchDirs": ["."],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,29 +6,26 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### [0.6.1](https://github.com/shinokada/svelte-flag-icons/compare/v0.5.7...v0.6.1) (2023-08-03)
 
-
 ### Features
 
-* use two files ([a28302f](https://github.com/shinokada/svelte-flag-icons/commit/a28302fffa2c0ba59c221ba485151c801fca9415))
+- use two files ([a28302f](https://github.com/shinokada/svelte-flag-icons/commit/a28302fffa2c0ba59c221ba485151c801fca9415))
 
 ### [0.5.7](https://github.com/shinokada/svelte-flag-icons/compare/v0.5.6...v0.5.7) (2023-07-20)
 
 ### [0.5.6](https://github.com/shinokada/svelte-flag-icons/compare/v0.5.5...v0.5.6) (2023-07-20)
 
-
 ### Features
 
-* add size range ([31dc914](https://github.com/shinokada/svelte-flag-icons/commit/31dc9147c47c7bc727077fafdadbdae69627ed9c))
-* update layout ([1e3d2de](https://github.com/shinokada/svelte-flag-icons/commit/1e3d2de3008869933fa7f5588367517d344d6cd2))
-
+- add size range ([31dc914](https://github.com/shinokada/svelte-flag-icons/commit/31dc9147c47c7bc727077fafdadbdae69627ed9c))
+- update layout ([1e3d2de](https://github.com/shinokada/svelte-flag-icons/commit/1e3d2de3008869933fa7f5588367517d344d6cd2))
 
 ### Bug Fixes
 
-* add backticks ([78655c0](https://github.com/shinokada/svelte-flag-icons/commit/78655c0e2fc1eb18c58edb7acbc0708b9795339e))
-* homepage update ([77f31c3](https://github.com/shinokada/svelte-flag-icons/commit/77f31c32375727d921769fa0a4e3a4e434004a43))
-* image sizes ([5d3e86f](https://github.com/shinokada/svelte-flag-icons/commit/5d3e86f564a9dd2392943b3972a190f8f211a64a))
-* typo ([99d9d77](https://github.com/shinokada/svelte-flag-icons/commit/99d9d77ac04e853c0d4eaa6983f809853254debd))
-* update flowbite-svelte v0.40.1, add @floating-ui/dom remove flowbite and popper, add tests ([a8f3a4d](https://github.com/shinokada/svelte-flag-icons/commit/a8f3a4d41cea8fbf1391beef5fd350cd45bfea23))
+- add backticks ([78655c0](https://github.com/shinokada/svelte-flag-icons/commit/78655c0e2fc1eb18c58edb7acbc0708b9795339e))
+- homepage update ([77f31c3](https://github.com/shinokada/svelte-flag-icons/commit/77f31c32375727d921769fa0a4e3a4e434004a43))
+- image sizes ([5d3e86f](https://github.com/shinokada/svelte-flag-icons/commit/5d3e86f564a9dd2392943b3972a190f8f211a64a))
+- typo ([99d9d77](https://github.com/shinokada/svelte-flag-icons/commit/99d9d77ac04e853c0d4eaa6983f809853254debd))
+- update flowbite-svelte v0.40.1, add @floating-ui/dom remove flowbite and popper, add tests ([a8f3a4d](https://github.com/shinokada/svelte-flag-icons/commit/a8f3a4d41cea8fbf1391beef5fd350cd45bfea23))
 
 ### [0.5.5](https://github.com/shinokada/svelte-flag-icons/compare/v0.5.4...v0.5.5) (2023-06-15)
 

diff --git a/README.md b/README.md
@@ -12,7 +12,6 @@
 
 Thank you for considering my open-source package. If you use it in a commercial project, please support me by sponsoring me on GitHub: https://github.com/sponsors/shinokada. Your support helps me maintain and improve this package for the benefit of the community.
 
-
 ## Repo
 
 [GitHub Repo](https://github.com/shinokada/svelte-flag-icons)
@@ -41,70 +40,178 @@ pnpm i -D svelte-flag-icons
 
 ```html
 <script>
-  import { Icon } from 'svelte-flag-icons';
+  import { Us } from 'svelte-flag-icons';
+</script>
+
+<Us />
+```
+
+## Faster compiling
+
+If you need only a few icons from this library in your Svelte app, import them directly. This can optimize compilation speed and improve performance by reducing the amount of code processed during compilation.
+
+```html
+<script>
+  import No from 'svelte-flag-icons/No.svelte';
 </script>
 
-<Icon name="us" />
+<No />
 ```
 
 ## Props
 
-- export let name;
-- export let width = "24";
-- export let height = "24";
-- export let role = 'img';
-- export let ariaLabel = name;
+- size = '24';
+- role = 'img';
+- ariaLabel = 'icon file name';
 
 ## IDE support
 
 If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, features, props, events, and an example.
 
-
 ## Size
 
-Use the `width` and `height` props to change the size of icons.
+Use the `size` prop to change the flag sizes.
 
 ```html
-<Icon name="us" width="100" height="100" />
+<script>
+  import { Us } from 'svelte-flag-icons';
+</script>
+
+<div>
+  <Us size="200" />
+</div>
 ```
 
 If you are using Tailwind CSS, you can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:
 
 ```html
-<Icon name="us" class="shrink-0 h-20 w-20" />
+<Us class="shrink-0 h-20 w-20" />
+```
+
+## Creating a Default Global Icon Setting in Svelte
+
+You can create a config file, `/src/lib/icon.config.json`.
+
+The `Icon` component serves as a wrapper for svelte:component, allowing you to establish a global default setting or expand the capabilities of a component.
+
+To create a default global icon setting, follow these steps:
+
+### Configuration File
+
+Start by creating a configuration file named `/src/lib/icon.config.json` with the following structure:
+
+```json
+{
+  "config1": {
+    "size": 40,
+    "color": "#FF5733"
+  },
+  "config2": {
+    "size": 50,
+    "color": "#445533"
+  }
+}
+```
+
+In this JSON file, you can define different configurations (config1 and config2 in this case) for your icons, specifying attributes like size, variation, and color.
+
+### Implementation
+
+In your Svelte page file, make use of the configurations from the JSON file:
+
+```html
+<script lang="ts">
+  type IconConfig = {
+    config1: {
+      size: number;
+    };
+    config2: {
+      size: number;
+    };
+  };
+  import config from '$lib/icon.config.json';
+  import { Icon, Us, No } from 'svelte-flag-icons';
+
+  const iconConfig: IconConfig = config;
+  const config1 = iconConfig.config1;
+  const config2 = iconConfig.config2;
+</script>
+
+<Icon {...config1} icon="{Us}" />
+<Icon {...config2} icon="{No}" />
+```
+
+We import the configurations from the JSON file and assign them to config1 and config2. We then utilize the Icon component with the spread attributes `{...config1}` and `{...config2}` to apply the respective configurations to each icon.
+
+### Custom Default Icon
+
+If you wish to create a custom default icon, you can follow these steps:
+
+Create a Svelte component named `src/lib/MyIcon.svelte`:
+
+```html
+<script lang="ts">
+  import type { ComponentType } from 'svelte';
+  const config = {
+    size: 30,
+    color: '#FF5733'
+  };
+  import { Icon } from 'svelte-flag-icons';
+  export let icon: ComponentType;
+</script>
+
+<Icon {...config} {icon} />
 ```
 
-## CSS frameworks suport
+This component, `MyIcon.svelte`, accepts an `icon` prop which you can use to pass in the specific icon component you want to display. The default configuration is also applied to the icon.
+
+### Implementation in a Page
+
+To use your custom default icon in a Svelte page, do the following:
+
+```html
+<script>
+  import MyIcon from '$lib/MyIcon.svelte';
+  import { Us } from 'svelte-flag-icons';
+</script>
+
+<MyIcon icon="{Us}" />
+```
+
+Here, we import the `MyIcon` component and the `Us` icon. By passing the `Us` icon to the `icon` prop of MyIcon, you apply the default configuration to the icon.
+
+
+## CSS frameworks support
 
 You can apply CSS framework color and other attributes directly to the icon component or its parent tag using the `class` prop.
 
 Tailwind CSS example:
 
 ```html
-<Icon name="us" class="inline m-1" />
+<Us class="rounded-full bg-white h-40 w-40 ring-2 ring-gray-300 m-4" />
 ```
 
-Bootstrap examples:
+Bootstrap example:
 
 ```html
-<Icon name="us" class="position-absolute top-0 px-1" />
+<Us class="position-absolute top-0 px-1" />
 ```
 
 ## aria-label
 
-All icons have aria-label. For example `us` has `aria-label="us"`.
+All icons have aria-label. For example `Us` has `aria-label="flag of us"`.
 Use `ariaLabel` prop to modify the `aria-label` value.
 
 ```html
-<Icon name="us" ariaLabel="us flag" />
+<Us ariaLabel="United States of America" />
 ```
 
 ## Unfocusable icon
 
 If you want to make an icon unfocusable, add `tabindex="-1"`.
 
 ```html
-<Icon name="us"  tabindex="-1" />
+<Us tabindex="-1" />
 ```
 
 ## Events
@@ -126,50 +233,86 @@ All icons have the following events:
 You can pass other attibutes as well.
 
 ```html
-<Icon name="us"  tabindex="0" />
+<Us tabindex="0" />
 ```
 
 ## Using svelte:component
 
 ```html
-<svelte:component this="{Icon}" name="us" />
+<script>
+  import { Ca } from 'svelte-flag-icons';
+</script>
+
+<svelte:component this="{Ca}" />
+```
+
+## Rendering Dynamically
+
+[REPL](https://svelte.dev/repl/e986f22713d34ec2b5e8fdd98301f936?version=4.0.5)
+
+```html
+<script>
+  import * as Flag from 'svelte-flag-icons';
+  const users = [
+    {
+      name: 'John',
+      country: 'Ca'
+    },
+    {
+      name: 'Jane',
+      country: 'Us'
+    }
+  ];
+  const a_user = {
+    country: 'Fr'
+  };
+</script>
+
+<svelte:component this="{Flag[a_user.country]}" size="100" style="margin-right:10px;" />
+
+{#each users as user}
+<svelte:component this="{Flag[user.country]}" size="100" style="margin-right: 10px;" />
+{/each}
 ```
 
 ## Using onMount
 
 ```html
 <script>
-  import {Icon} from 'svelte-flag-icons';
+  import { ChatPlus } from 'svelte-flag-icons';
   import { onMount } from 'svelte';
   const props = {
-    name: 'us',
     size: '50',
     color: '#ff0000'
   };
   onMount(() => {
-    const icon = new Icon({ target: document.body, props });
+    const icon = new Us({ target: document.body, props });
   });
 </script>
 ```
 
-
 ## Import all
 
-Use `import {Icon, icons} from 'svelte-flag-icons';`.
+Use `import * as Icon from 'svelte-flag-icons`.
+
+[REPL](https://svelte.dev/repl/754f6d9e949441978f1073b68437129f?version=3.48.0)
 
 ```html
 <script>
-  import {Icon, icons} from 'svelte-flag-icons';
+  import * as Icon from 'svelte-flag-icons';
 </script>
+<h1>Size</h1>
+<Icon.Fr size="30" />
+<Icon.De size="40" />
 
-{#each Object.keys(icons) as name}
-<div class="flex gap-4 items-center text-lg">
-  <Icon name={name} class="shrink-0"/>
-  {name}
-</div>
-{/each}
+<h1>CSS HEX color</h1>
+<Icon.Dk color="#c61515" size="40" />
+
+<h1>Tailwind CSS</h1>
+<Icon.Jp class="text-blue-500" />
+<Icon.No class="text-pink-700" />
 ```
 
 ## Other icons
 
-[Svelte-Icon-Sets](https://svelte-svg-icons.vercel.app/)
+[Svelte-Icon-Sets](https://svelte-svg-icons.vercel.app/)
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />