Svelte SVG アイコンの人気順位

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/047053fd-8722-7c61-f727-8d3556248081.png)

Svelte用のアイコンには色々ありますがここでは自作の[Svelte SVG Icon Sets](https://svelte-svg-icons.vercel.app/)にあります23種のアイコンセットの人気順位の発表をさせてもらいます。

## アイコンの特徴

まずは共通しているアイコンの特徴からです。

### サイズ

アイコンのサイズが簡単に変えられます。

```
<SampleIconName size="40" />
```

### CSSカラー

CSSのHEXコードを使って色を変えられます。

```
<SampleIconName color="#ff0000" />
```

### CSS framework サポート

TailwindCSSやBootstrapなどのCSS Frameworkも使えます。

```
// TailwindCSS
<SampleIconName class="text-pink-700 mr-4" />
// Bootstrap
<SampleIconName class="position-absolute top-0 px-1" /> 
```

### Aria-label

A11y用のAria-labelはアイコン名から自動的にデフォルトでついていますが変更も可能です。

```
<SampleIconName ariaLabel="red acount book" />
```

### svelte:componentで使用可能

```
<svelte:component this="{SampleIconName}" size="40" />
```

### Event

Eventもフォワードされていますのでカスタムのイベントを付加できます。

```
on:click
on:mouseenter
on:mouseleave
on:mouseover
on:mouseout
on:blur
on:focus
```

### その他

その他に他のアトリビュートを追加したり`import * as Icon`を使って全てのアイコンもインポートできます。

```
<script>
  import * as Icon from 'svelte-heros-v2';
</script>

<Icon.SampleIconName size="30" class="text-red-500" />
```


## 順位発表

11月末の数字ですので最新の数字とは異なります。


### 第十位 Svelte-Weather

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/4e5bf546-a40d-1db8-8ed7-c05efc155f9d.png)
トータルダウンロード数: 24K
[Svelte-Weather](https://github.com/shinokada/svelte-weather)
- アイコン数: 210+
- [Icon list](https://github.com/shinokada/svelte-weather/blob/main/icon-list.md)
- [Demo](https://svelte.dev/repl/d98438528d974bb7981357fa20e92137?version=3.53.1)

### 第九位 Svelte-Radix

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/0d45c9ee-da85-dcfc-bb1e-3e0c7b7cf5a7.png)
トータルダウンロード数: 36K
[Svelte-Radix](https://github.com/shinokada/svelte-radix)
- アイコン数: 310
- [Icon list](https://github.com/shinokada/svelte-radix/blob/main/icon-list.md)
- [Demo](https://svelte.dev/repl/fb0def38847240f3a51460a56bf53225?version=3.53.1)

### 第八位 Svelte-Remix

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/6798fecd-141a-d0dc-a0b4-c59ee3cec73e.png)
トータルダウンロード数: 48K
[Svelte-Remix](https://github.com/shinokada/svelte-remix)
- アイコン数: 2270+
- [Icon list](https://github.com/shinokada/svelte-remix/blob/main/icon-list.md)
- [Demo](https://svelte.dev/repl/7812811916134c5791884e761a1fdc11?version=3.53.1)


### 第七位 Svelte-Flags

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/4951ec70-97d7-7f18-a252-d62a0e0deef7.png)
トータルダウンロード数: 70K
[Svelte-Flags](https://github.com/shinokada/svelte-flags)
- アイコン数: 250+
- [Icon list](https://github.com/shinokada/svelte-flags/blob/main/flags.md)
- [Demo](https://svelte.dev/repl/445d2bd2211a4386b5cba3953d8f9fbd?version=3.53.1)

### 第六位 Svelte-File-Icons

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/90f6658a-2c2d-5456-c1ea-14cc3fcf25fc.png)
トータルダウンロード数: 82K
[Svelte-File-Icons](https://www.npmjs.com/package/svelte-file-icons)
- アイコン数: 930+
- [Icon list](https://github.com/shinokada/svelte-file-icons/blob/main/icon-list.md)
- [Demo](https://svelte.dev/repl/985ea64e08a942b493afa91538fef9b1?version=3.53.1)

### 第五位 Svelte-Bootstrap-SVG-Icons
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/b316e531-db94-a408-5516-a89cd5afeb58.png)
トータルダウンロード数: 85K
[Svelte-Bootstrap-SVG-Icons](https://github.com/shinokada/svelte-bootstrap-svg-icons)
- アイコン数: 1660+
- [Icon list](https://github.com/shinokada/svelte-bootstrap-svg-icons/blob/main/icon-list.md)
- [Demo](https://svelte.dev/repl/1437da750c8048fc8d77cde07f472456?version=3.53.1)

### 第四位 Svelte-Ionicons
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/ba92d8cf-6204-8925-929c-d81917d01d1d.png)
トータルダウンロード数: 95K
[Svelte-Ionicons](https://github.com/shinokada/svelte-ionicons)
- アイコン数: 1330+
- [Icon list](https://github.com/shinokada/svelte-ionicons/blob/main/icon-list.md)

### 第三位 Svelte-Tabler

![Screenshot 2022-12-04 at 9.17.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/bb6165e3-1513-d401-06ab-4733dd76884e.png)

トータルダウンロード数: 113K
[Svelte-Tabler](https://github.com/shinokada/svelte-tabler)
- アイコン数: 1970+
- [Icon list](https://github.com/shinokada/svelte-tabler/blob/main/icon-list.md)
- [Demo](https://svelte.dev/repl/55ccaffe3d414235a6bb554ffd98f4bc?version=3.53.1)


### 第二位 Svelte-Heros

v1とv2を合わせて約20万回のダウンロードで第二位はSvelte-Heros
です。
![Screenshot 2022-12-04 at 9.15.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/00bcc93a-1df3-f6ee-3523-ed57e140665a.png)
トータルダウンロード数: 146K + 53K
[Svelte-Heros](https://github.com/shinokada/svelte-heros)と[Svelte-Heros-v2](https://github.com/shinokada/svelte-heros-v2)
- アイコン数:460+(260+)
- [Icon list](https://github.com/shinokada/svelte-heros/blob/main/icon-list.md)と[Icon list](https://github.com/shinokada/svelte-heros-v2/blob/main/icon-list.md)
- [Demo](https://svelte.dev/repl/48606ee88712441caebd7d09aa62602c?version=3.53.1)と[Demo](https://svelte.dev/repl/1948d7b5157f44709cff380d9783342c?version=3.53.1)

### 第一位 Svelte-Awesome-Icons

堂々の50万のダウンロードで[Svelte-Awesome-Icons](https://www.npmjs.com/package/svelte-awesome-icons)が第一位です。
![Screenshot 2022-12-04 at 9.14.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/d9a8d954-36d2-99ae-a6a9-9e98d535d6ad.png)

トータルダウンロード数:500K
[Svelte-Awesome-Icons](https://github.com/shinokada/svelte-awesome-icons)
- アイコン数: 2000+
- [Icon list](https://github.com/shinokada/svelte-awesome-icons/blob/main/icon-list.md)
- [Demo](https://svelte.dev/repl/c0045886b264408fba13f1de70c42932?version=3.53.1)

好きなアイコンを見つけて使ってみてください。