Nuxt Icons

一个 Nuxt 4 模块，让您可以快速愉快地使用自己的 SVG 图标。

安装

1. `npx nuxi@latest module add icons
2. 在 nuxt.config.ts 中添加 nuxt-icons 到模块

export default defineNuxtConfig({
    modules: ['nuxt-icons']
})

使用

1. 在 assets 中创建一个 icons 文件夹：assets/icons
2. 将您的 **.svg** 扩展名图标放入 icons 文件夹中
3. 在项目中，使用 <nuxt-icon name="">，其中 name 是您文件夹中 svg 图标的名称

如果您需要使用 svg 文件的原始颜色（例如，如果您的图标有 defs），您需要使用 filled 属性
<nuxt-icon name="mySuperIcon" filled />

子文件夹

如果您想使用更复杂的文件夹排列，您将不得不使用 /icons 的路径

如果您在嵌套目录中有 svg 图标，例如

📁icons
  └📁admin
  ⠀⠀└ badge.svg
  └📁user
  ⠀⠀└ badge.svg

那么图标的名称将基于其自己的路径目录和文件名。因此，图标的名称将是

<nuxt-icon name="admin/badge"> and <nuxt-icon name="user/badge">

我不喜欢分配给图标的基本样式！

为图标创建的样式如下所示

width: 1em;
height: 1em;
margin-bottom: 0.125em;
vertical-align: middle;

您可以使用常规 CSS 轻松更改这些样式，例如在您的 index.vue 文件中

<style>
.nuxt-icon svg{
  margin-bottom: 0;
}
</style>

我想使用在线可用的图标包中的图标

您可以下载 SVG 格式的图标并将其放入 /icons 文件夹，或者使用另一个原生支持此功能的模块：nuxt-icon

此模块的作用

该模块从 assets/icons 文件夹中检索所有 svg 文件，覆盖它们的 height 和 width 使它们可伸缩，并使用 <nuxt-icon> 组件允许它们被使用。<nuxt-icon> 直接将 SVG 代码注入 <span>。

功能

• 轻松管理 SVG 图标 ✅
• HMR（您无需重置项目即可重新加载图标）✅
• 能够像字体一样操作图标，例如使用 color、font-size 代替 fill、width、height ✅
• 能够使用 filled 属性为复杂图标使用原始配色方案 ✅
• 仅在使用时加载图标 ✅

开发

• 运行 npm run dev:prepare 以生成类型存根。
• 使用 npm run dev 以开发模式启动 playground。

想法和待办事项

• 自动 SVG 文件优化
• 自动缩放非正方形尺寸的图标以保持其比例（可能使用 preserveAspectRatio）
• 可用于以前的 Nuxt 版本（只需使用 类似这样的东西）
• 如果页面上使用大量相同的图标，则创建单独的 svg sprite（显著提高性能）

非常感谢 @Diizzayy 在项目开发中提供的宝贵帮助