Nuxt 图标

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

安装

1. `npx nuxi@latest module add icons
2. 将 nuxt-icons 添加到 modules，在 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>

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

您可以下载 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 在项目开发中提供的宝贵帮助