fix: add reactivity to switch by adding $:

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}

CHANGELOG.md

@@ -12,11 +12,11 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### BREAKING CHANGE
 
-* change icon names without SOLID/OUTLINE
+- change icon names without SOLID/OUTLINE
 
 ### Features
 
-* add variation prop ([efc109b](https://github.com/shinokada/svelte-heros/commit/efc109b372c554ea4dd95d5a7f7dcec524158435))
+- add variation prop ([efc109b](https://github.com/shinokada/svelte-heros/commit/efc109b372c554ea4dd95d5a7f7dcec524158435))
 
 ### [2.1.4](https://github.com/shinokada/svelte-heros/compare/v2.1.3...v2.1.4) (2022-06-01)
 
@@ -28,48 +28,42 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [2.1.0](https://github.com/shinokada/svelte-heros/compare/v2.0.3...v2.1.0) (2022-05-26)
 
-
 ### Features
 
-* add restProps and aria-label ([6c989db](https://github.com/shinokada/svelte-heros/commit/6c989db5ecc6d01c9b341afe0f60cb324356fb94))
+- add restProps and aria-label ([6c989db](https://github.com/shinokada/svelte-heros/commit/6c989db5ecc6d01c9b341afe0f60cb324356fb94))
 
 ### [2.0.3](https://github.com/shinokada/svelte-heros/compare/v2.0.2...v2.0.3) (2022-05-18)
 
 ### [2.0.2](https://github.com/shinokada/svelte-heros/compare/v2.0.1...v2.0.2) (2022-05-18)
 
 ### [2.0.1](https://github.com/shinokada/svelte-heros/compare/v2.0.0...v2.0.1) (2022-05-13)
 
-
 ### Bug Fixes
 
-* remove stroke on solid icons ([9d0bb3f](https://github.com/shinokada/svelte-heros/commit/9d0bb3f9c275ad6f3ba415339222f2f01e488e87))
+- remove stroke on solid icons ([9d0bb3f](https://github.com/shinokada/svelte-heros/commit/9d0bb3f9c275ad6f3ba415339222f2f01e488e87))
 
 ## [2.0.0](https://github.com/shinokada/svelte-heros/compare/v1.3.0...v2.0.0) (2022-04-26)
 
-
 ### Bug Fixes
 
-* update icon names ([4d5692a](https://github.com/shinokada/svelte-heros/commit/4d5692aa7336c7a7212e8b2c684a6f8485e5f985))
+- update icon names ([4d5692a](https://github.com/shinokada/svelte-heros/commit/4d5692aa7336c7a7212e8b2c684a6f8485e5f985))
 
 ## [1.3.0](https://github.com/shinokada/svelte-heroicons/compare/v1.2.1...v1.3.0) (2022-04-26)
 
-
 ### Features
 
-* remove Icon from icon names ([5478f08](https://github.com/shinokada/svelte-heroicons/commit/5478f08c824722570bf4881d6ba8d15345258dc7))
+- remove Icon from icon names ([5478f08](https://github.com/shinokada/svelte-heroicons/commit/5478f08c824722570bf4881d6ba8d15345258dc7))
 
 ### [1.2.1](https://github.com/shinokada/svelte-heroicons/compare/v1.2.0...v1.2.1) (2022-04-26)
 
-
 ### Bug Fixes
 
-* moved class={90360props.class} to the end of <svg> ([4156617](https://github.com/shinokada/svelte-heroicons/commit/4156617ce204cccfbac85af57f2155bf178a1b90))
+- moved class={90360props.class} to the end of <svg> ([4156617](https://github.com/shinokada/svelte-heroicons/commit/4156617ce204cccfbac85af57f2155bf178a1b90))
 
 ## [1.2.0](https://github.com/shinokada/svelte-heroicons/compare/v1.1.4...v1.2.0) (2022-04-25)
 
-
 ### Features
 
-* update icons ([2e3265b](https://github.com/shinokada/svelte-heroicons/commit/2e3265b36cc3fe82c052aa8316ca171a06f0f42a))
+- update icons ([2e3265b](https://github.com/shinokada/svelte-heroicons/commit/2e3265b36cc3fe82c052aa8316ca171a06f0f42a))
 
 ### [1.1.4](https://github.com/shinokada/svelte-heroicons/compare/v1.1.0...v1.1.4) (2022-04-25)

README.md

@@ -2,7 +2,6 @@
 
 Hero Icons for Svelte. You can import outline and solid icons without name conflict. Svlete-Heros support major CSS framework. You can add additional CSS using the `class` props.
 
-
 <p align="center">
 <img width="450" src="https://raw.githubusercontent.com/shinokada/svelte-heros/main/static/images/heros1.webp" />
 <img width="450" src="https://raw.githubusercontent.com/shinokada/svelte-heros/main/static/images/heros2.webp" />
@@ -30,9 +29,7 @@ npm i svelte-heros@latest
 ## Usage
 
 ```js
-<script>
-  import { AcademicCap } from "svelte-heros";
-</script>
+<script>import {AcademicCap} from "svelte-heros";</script>
 ```
 
 ## Props
@@ -67,8 +64,7 @@ Use the `size` prop to change the size of icons.
 Use the `color` prop to change colors with HEX color code.
 
 ```html
-<AcademicCap color="#ff0000" />
-<AcademicCap color="#00ffd8" />
+<AcademicCap color="#ff0000" /> <AcademicCap color="#00ffd8" />
 ```
 
 ## CSS framework support
@@ -95,22 +91,21 @@ Bootstrap example:
 <AcademicCap class="position-absolute top-0 px-1" />
 ```
 
-
 ## aria-label
 
-All icons have aria-label. For example `AcademicCap` has `aria-label="academic cap"`. 
-Use `ariaLabel` prop to modify the `aria-label` value. 
+All icons have aria-label. For example `AcademicCap` has `aria-label="academic cap"`.
+Use `ariaLabel` prop to modify the `aria-label` value.
 
 ```html
-<AcademicCap ariaLabel="red academic cap" class="text-red-500">
+<AcademicCap ariaLabel="red academic cap" class="text-red-500"></AcademicCap>
 ```
 
 ## Passing down other attributes
 
 You can pass other attibutes as well.
 
 ```html
-<AcademicCap tabindex="0">
+<AcademicCap tabindex="0"></AcademicCap>
 ```
 
 ## Import all
@@ -119,7 +114,7 @@ Use `import * as Icon from 'svelte-heros`.
 
 ```html
 <script>
-  import * as Icon from "svelte-heros";
+	import * as Icon from 'svelte-heros';
 </script>
 
 <Icon.ShoppingBag size="30" class="text-red-500" />
@@ -133,4 +128,4 @@ Use `import * as Icon from 'svelte-heros`.
 
 ## Other icons
 
-- [Svelte-Icon-Sets](https://svelte-svg-icons.vercel.app/)
+- [Svelte-Icon-Sets](https://svelte-svg-icons.vercel.app/)

package.json

@@ -1,48 +1,51 @@
 {
-  "name": "svelte-heros",
-  "version": "2.2.3",
-  "description": "Svelte + TailwindCSS + HeroIcons components",
-  "author": {
-    "name": "Shinichi Okada",
-    "email": "connect@codewithshin.com",
-    "url": "https://blog.codewithshin.com"
-  },
-  "bugs": "https://github.com/shinokada/svelte-heros/issues",
-  "homepage": "https://github.com/shinokada/svelte-heros",
-  "license": "MIT",
-  "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
-    "package": "svelte-kit package",
-    "preview": "svelte-kit preview",
-    "test": "vitest"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/svelte": "^3.1.3",
-    "autoprefixer": "^10.4.2",
-    "postcss": "^8.4.5",
-    "postcss-load-config": "^3.1.1",
-    "svelte": "^3.44.0",
-    "svelte-preprocess": "^4.10.1",
-    "svelte2tsx": "^0.5.3",
-    "tailwindcss": "^3.0.12",
-    "typescript": "^4.7.3",
-    "vitest": "^0.14.1"
-  },
-  "type": "module",
-  "main": "index.js",
-  "svelte": "index.js",
-  "keywords": [
-    "svelte",
-    "sveltekit",
-    "tailwindcss",
-    "icons"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/shinokada/svelte-heros"
-  }
+	"name": "svelte-heros",
+	"version": "2.2.3",
+	"description": "Svelte + TailwindCSS + HeroIcons components",
+	"author": {
+		"name": "Shinichi Okada",
+		"email": "connect@codewithshin.com",
+		"url": "https://blog.codewithshin.com"
+	},
+	"bugs": "https://github.com/shinokada/svelte-heros/issues",
+	"homepage": "https://github.com/shinokada/svelte-heros",
+	"license": "MIT",
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"package": "svelte-kit package",
+		"preview": "svelte-kit preview",
+		"test": "vitest",
+		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
+		"@testing-library/jest-dom": "^5.16.4",
+		"@testing-library/svelte": "^3.1.3",
+		"autoprefixer": "^10.4.2",
+		"postcss": "^8.4.5",
+		"postcss-load-config": "^3.1.1",
+		"prettier": "2.7.1",
+		"prettier-plugin-svelte": "^2.7.0",
+		"svelte": "^3.44.0",
+		"svelte-preprocess": "^4.10.1",
+		"svelte2tsx": "^0.5.3",
+		"tailwindcss": "^3.0.12",
+		"typescript": "^4.7.3",
+		"vitest": "^0.14.1"
+	},
+	"type": "module",
+	"main": "index.js",
+	"svelte": "index.js",
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"tailwindcss",
+		"icons"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/shinokada/svelte-heros"
+	}
 }