Svelte用のアイコンには色々ありますがここでは自作のSvelte SVG Icon Setsにあります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

トータルダウンロード数: 24K
Svelte-Weather

アイコン数: 210+
Icon list
Demo

第九位 Svelte-Radix

トータルダウンロード数: 36K
Svelte-Radix

アイコン数: 310
Icon list
Demo

第八位 Svelte-Remix

トータルダウンロード数: 48K
Svelte-Remix

アイコン数: 2270+
Icon list
Demo

第七位 Svelte-Flags

トータルダウンロード数: 70K
Svelte-Flags

アイコン数: 250+
Icon list
Demo

第六位 Svelte-File-Icons

トータルダウンロード数: 82K
Svelte-File-Icons

アイコン数: 930+
Icon list
Demo

第五位 Svelte-Bootstrap-SVG-Icons

トータルダウンロード数: 85K
Svelte-Bootstrap-SVG-Icons

アイコン数: 1660+
Icon list
Demo

第四位 Svelte-Ionicons

トータルダウンロード数: 95K
Svelte-Ionicons

アイコン数: 1330+
Icon list

第三位 Svelte-Tabler

トータルダウンロード数: 113K
Svelte-Tabler

アイコン数: 1970+
Icon list
Demo

第二位 Svelte-Heros

v1とv2を合わせて約20万回のダウンロードで第二位はSvelte-Heros
です。

トータルダウンロード数: 146K + 53K
Svelte-HerosとSvelte-Heros-v2

アイコン数:460+(260+)
Icon listとIcon list
DemoとDemo

第一位 Svelte-Awesome-Icons

堂々の50万のダウンロードでSvelte-Awesome-Iconsが第一位です。

トータルダウンロード数:500K
Svelte-Awesome-Icons

アイコン数: 2000+
Icon list
Demo

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