图标

CSS

使用图标的一个好方法是纯粹通过 CSS 来定义它们。Iconify 支持 许多流​​行的图标集 和 可以通过以下方式包含 CSS。此方法也可以通过利用 Iconify Tailwind CSS 插件 或 UnoCSS 插件 与流行的 CSS 框架一起使用。与基于 Svelte 组件的库不同，它不需要将每个图标导入到你的 .svelte 文件中。

¥A great way to use icons is to define them purely via CSS. Iconify offers support for many popular icon sets that can be included via CSS. This method can also be used with popular CSS frameworks by leveraging the Iconify Tailwind CSS plugin or UnoCSS plugin. As opposed to libraries based on Svelte components, it doesn’t require each icon to be imported into your .svelte file.

Svelte

有许多 Svelte 图标库。选择图标库时，建议避免使用那些为每个图标提供一个 .svelte 文件的库，因为这些库可能包含数千个 .svelte 文件，这会严重降低 Vite 的依赖优化 的速度。如果通过伞形导入和子路径导入 如 vite-plugin-svelte FAQ 中所述 导入图标，这可能会变得特别病态。

¥There are many icon libraries for Svelte. When choosing an icon library, it is recommended to avoid those that provide a .svelte file per icon as these libraries can have thousands of .svelte files which really slow down Vite’s dependency optimization. This can become especially pathological if the icons are imported both via an umbrella import and subpath import as described in the vite-plugin-svelte FAQ.