## CSS <!--CSS-->

アイコンの利用において、優れた手法のひとつが CSS を用いて定義する方法です。Iconifyは [多くの人気アイコンセット](https://icon-sets.iconify.design/) をサポートしており、[CSSで組み込むことができます](https://iconify.design/docs/usage/css/)。この方法は、Iconifyの [Tailwind CSS プラグイン](https://iconify.design/docs/usage/css/tailwind/) や [UnoCSS プラグイン](https://iconify.design/docs/usage/css/unocss/) を活用することで、人気のCSSフレームワークと組み合わせて使うことも可能です。Svelteコンポーネントベースのライブラリとは異なり、各アイコンを `.svelte` ファイルにインポートする必要がありません。

## Svelte <!--Svelte-->

[Svelte用のアイコンライブラリ](/packages#icons) は数多くあります。アイコンライブラリを選択する際は、アイコンごとに `.svelte` ファイルを提供するものは避けることをお勧めします。これらのライブラリは数千の `.svelte` ファイルを持つ可能性があり、[Viteの依存関係最適化](https://vite.dev/guide/dep-pre-bundling.html) を大幅に遅くしてしまいます。これは [`vite-plugin-svelte`のFAQで説明されている](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies) ように、アイコンを umbrella import と subpath import の両方で読み込んでしまうことで、パフォーマンスの問題が顕著になる可能性があるためです。