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 在开发模式下启动 playground。

想法和待办事项

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

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