5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

SvelteAdvent Calendar 2022

Day 8

Svelte SVG アイコンの人気順位

Last updated at Posted at 2022-12-07

image.png

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

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

第九位 Svelte-Radix

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

第八位 Svelte-Remix

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

第七位 Svelte-Flags

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

第六位 Svelte-File-Icons

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

第五位 Svelte-Bootstrap-SVG-Icons

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

第四位 Svelte-Ionicons

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

第三位 Svelte-Tabler

Screenshot 2022-12-04 at 9.17.20.png

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

第二位 Svelte-Heros

v1とv2を合わせて約20万回のダウンロードで第二位はSvelte-Heros
です。
Screenshot 2022-12-04 at 9.15.35.png
トータルダウンロード数: 146K + 53K
Svelte-HerosSvelte-Heros-v2

第一位 Svelte-Awesome-Icons

堂々の50万のダウンロードでSvelte-Awesome-Iconsが第一位です。
Screenshot 2022-12-04 at 9.14.59.png

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

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

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?