Nuxt3 中如何管理和使用 svg 图标

背景

Svg 矢量图由于可以任意放大缩小都不会失真，所以网页上的图标基本上都会选择使用 svg 格式。但是如果像使用图片那样去使用 svg 图标，会非常低效而且不方便控制样式。在 Nuxt3 中，有着其更优雅的解决方案

如何快速使用第三方 icon

Nuxt3 的 modules 中提供了一个模块组件nuxt-icon，这个组件支持通过 Iconify 使用到 200,000 个开源矢量图标。

安装 nuxt-icon

1. 先安装依赖 nuxt-icon

npm install --save-dev nuxt-icon

# Using yarn
yarn add --dev nuxt-icon

1. 在 nuxt.config.ts 文件中的注册模块

import { defineNuxtConfig } from 'nuxt'

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

1. 这就完成啦！

使用 nuxt-icon

使用 nuxt-icon 只需要在用到图标的地方使用 <Icon ``/``>组件， 比如

<Icon name="uil:github" color="black" />

这个组件支持如下属性

• name （required）：图标名称、表情符号或全局组件名称，您可以使用 icones.js.org 集合中的任何名称。
• size：图标大小（默认：1em）

如果您需要对图标进行全局配置，可以在nuxt.config.js文件中的icon选项下添加配置：

export default {
  icon: {
    size: '24px', // 默认图标大小
    color: '#000', // 默认图标颜色
    // 其他全局配置...
  },
  // 其他配置...
}

如何使用自定义的 svg 图标

很多时候，我们网页中使用的图标都是设计师绘制的，那么我们需要将图标的 svg 文件导入到项目目录中，然后通过 import 来使用。这时候，nuxt-icons 就派上用场了。

安装 nuxt-icons

1. 同理， 先安装依赖 nuxt-icons

npm install --save-dev nuxt-icons

# Using yarn
yarn add --dev nuxt-icons

1. 同样，在 nuxt.config.ts 文件中的注册该模块

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

1. 完成，敬请食用吧！

使用 Nuxt-icons

要使用 nuxt-icons，你需要按照以下步骤进行操作：

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

<nuxt-icon name="mySuperIcon"/>

1. 如果你需要使用 svg 文件中的原始颜色（例如，如果你的图标包含 defs），你需要使用 filled 属性：

<nuxt-icon name="mySuperIcon" filled />

1. 如果你不喜欢为图标分配的基本样式，你可以在你的 index.vue 文件中使用常规的 CSS 来更改这些样式。例如：

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

通过按照上述步骤，你就可以使用 nuxt-icons 来使用自己的 SVG 图标了。