svelte-remix 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.3](https://github.com/shinokada/svelte-remix-icons/compare/v0.1.2...v0.1.3) (2022-05-29)
+
 ### [0.1.2](https://github.com/shinokada/svelte-remix-icons/compare/v0.1.1...v0.1.2) (2022-05-29)
 
 ### [0.1.1](https://github.com/shinokada/svelte-remix-icons/compare/v0.1.0...v0.1.1) (2022-05-29)

package/README.md

@@ -6,11 +6,12 @@
 2270+ SVG file icon components for Svelte. Svelte-Remix support major CSS frameworks using the `class` props.
 
 <p align="center">
-<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix-icons1.webp" />
-<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix-icons2.webp" />
-<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix-icons3.webp" />
-<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix-icons4.webp" />
-<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix-icons5.webp" />
+<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix1.webp" />
+<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix2.webp" />
+<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix3.webp" />
+<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix4.webp" />
+<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix5.webp" />
+<img width="400" src="https://raw.githubusercontent.com/shinokada/svelte-remix/main/static/images/remix6.webp" />
 </p>
 
 ## Icon name list
@@ -23,22 +24,26 @@
 npm i -D svelte-remix
 ```
 
+## REPL
+
+[Demo](https://svelte.dev/repl/60e7000b54004872aa4006535fcef7fd?version=3.48.0)
+
 ## Usages
 
 In a svelte file:
 
 ```html
 <script>
-	import { Vite, Config, D3, Sublime, Svelte, VSCode, EJS } from 'svelte-remix';
+	import {
+		BankFillBUILDINGS,
+		MailDownloadFillBUSINESS,
+		InboxUnarchiveLineBUSINESS
+	} from 'svelte-remix';
 </script>
 
-<Vite />
-<Config />
-<D3 />
-<Sublime />
-<Svelte />
-<VSCode />
-<EJS />
+<BankFillBUILDINGS />
+<MailDownloadFillBUSINESS />
+<InboxUnarchiveLineBUSINESS />
 ```
 
 ## Size
@@ -46,13 +51,9 @@ In a svelte file:
 Use the `size` prop to change the size of icons.
 
 ```html
-<Vite size="40" />
-<Config size="40" />
-<D3 size="40" />
-<Sublime size="40" />
-<Svelte size="40" />
-<VSCode size="40" />
-<EJS size="40" />
+<BankFillBUILDINGS size="40" />
+<MailDownloadFillBUSINESS size="40" />
+<InboxUnarchiveLineBUSINESS size="40" />
 ```
 
 ## CSS HEX Colors
@@ -60,9 +61,9 @@ Use the `size` prop to change the size of icons.
 Use the `color` prop to change colors with HEX color code.
 
 ```html
-<Vite color="#c61515" />
-<Config color="#3759e5" />
-<D3 color="#3fe537" />
+<BankFillBUILDINGS color="#c61515" />
+<MailDownloadFillBUSINESS color="#3759e5" />
+<InboxUnarchiveLineBUSINESS color="#3fe537" />
 ```
 
 ## CSS framworks suport
@@ -72,13 +73,13 @@ Use the `class` prop to change size, colors and add additional css.
 Tailwind CSS example:
 
 ```html
-<Svelte class="h-24 w-24 text-blue-700 mr-4" />
+<BankFillBUILDINGS class="h-24 w-24 text-blue-700 mr-4" />
 ```
 
 Bootstrap examples:
 
 ```html
-<Svelte class="position-absolute top-0 px-1" />
+<BankFillBUILDINGS class="position-absolute top-0 px-1" />
 ```
 
 ## Dark mode
@@ -88,7 +89,7 @@ If you are using the dark mode on your website with Tailwind CSS, add your dark
 Let's use `dark` for the dark mode class as an example.
 
 ```html
-<Svelte class="text-blue-700 dark:text-red-500" />
+<BankFillBUILDINGS class="text-blue-700 dark:text-red-500" />
 ```
 
 ## aria-label
@@ -97,7 +98,7 @@ All icons have aria-label. For example `Svelte` has `aria-label="svelte"`.
 Use `ariaLabel` prop to modify the `aria-label` value.
 
 ```html
-<Svelte ariaLabel="Awesome Svelte" />
+<BankFillBUILDINGS ariaLabel="Awesome Svelte" />
 ```
 
 ## Passing down other attributes
@@ -105,31 +106,31 @@ Use `ariaLabel` prop to modify the `aria-label` value.
 You can pass other attibutes as well.
 
 ```html
-<Svelte tabindex="0" />
+<BankFillBUILDINGS tabindex="0" />
 ```
 
 ## Using svelte:component
 
 ```html
 <script>
-	import { Svelte } from 'svelte-remix';
+	import { BankFillBUILDINGS } from 'svelte-remix';
 </script>
 
-<svelte:component this="{Svelte}" />
+<svelte:component this="{BankFillBUILDINGS}" />
 ```
 
 ## Using onMount
 
 ```html
 <script>
-	import { Svelte } from 'svelte-remix';
+	import { BankFillBUILDINGS } from 'svelte-remix';
 	import { onMount } from 'svelte';
 	const props = {
 		size: '50',
 		color: '#ff0000'
 	};
 	onMount(() => {
-		const icon = new Svelte({ target: document.body, props });
+		const icon = new BankFillBUILDINGS({ target: document.body, props });
 	});
 </script>
 ```
@@ -143,19 +144,19 @@ Use `import * as Icon from 'svelte-remix`.
 	import * as Icon from 'svelte-remix';
 </script>
 
-<Icon.Svelte />
-<Icon.Vite />
+<Icon.BankFillBUILDINGS />
+<Icon.MailDownloadFillBUSINESS />
 
 <h1>Size</h1>
-<Icon.Svelte size="30" />
-<Icon.Vite size="40" />
+<Icon.BankFillBUILDINGS size="30" />
+<Icon.MailDownloadFillBUSINESS size="40" />
 
 <h1>CSS HEX color</h1>
-<Icon.Svelte color="#c61515" size="40" />
+<Icon.BankFillBUILDINGS color="#c61515" size="40" />
 
 <h1>Tailwind CSS</h1>
-<Icon.Svelte class="text-blue-500" />
-<Icon.Vite class="text-pink-700" />
+<Icon.BankFillBUILDINGS class="text-blue-500" />
+<Icon.MailDownloadFillBUSINESS class="text-pink-700" />
 ```
 
 ## Other icons

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-remix",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Svelte Remix Icon components",
   "author": {
     "name": "Shinichi Okada",