Nuxt 图标

一个适用于 Nuxt 3 的模块，允许您快速轻松地使用自己的 SVG 图标。

安装

1. npm i nuxt-icons
2. 将 nuxt-icons 添加到模块中，**nuxt.config.ts**

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>

此模块的作用

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

功能

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

开发

• 运行 npm run dev:prepare 生成类型存根。
• 使用 npm run dev 在开发模式下启动 游乐场。

想法和待办事项

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

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