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
第九位 Svelte-Radix
トータルダウンロード数: 36K
Svelte-Radix
第八位 Svelte-Remix
トータルダウンロード数: 48K
Svelte-Remix
第七位 Svelte-Flags
トータルダウンロード数: 70K
Svelte-Flags
第六位 Svelte-File-Icons
トータルダウンロード数: 82K
Svelte-File-Icons
第五位 Svelte-Bootstrap-SVG-Icons
トータルダウンロード数: 85K
Svelte-Bootstrap-SVG-Icons
第四位 Svelte-Ionicons
トータルダウンロード数: 95K
Svelte-Ionicons
- アイコン数: 1330+
- Icon list
第三位 Svelte-Tabler
トータルダウンロード数: 113K
Svelte-Tabler
第二位 Svelte-Heros
v1とv2を合わせて約20万回のダウンロードで第二位はSvelte-Heros
です。
トータルダウンロード数: 146K + 53K
Svelte-HerosとSvelte-Heros-v2
第一位 Svelte-Awesome-Icons
堂々の50万のダウンロードでSvelte-Awesome-Iconsが第一位です。
トータルダウンロード数:500K
Svelte-Awesome-Icons
好きなアイコンを見つけて使ってみてください。