在 Vue 项目中实现更简便的 Icon 使用方法

前言

在 Vue 项目中，我们经常需要使用图标（Icons）来美化界面，提升用户体验。虽然 NaiveUI 提供了 n-icon 组件来展示图标，但在实际使用过程中，频繁导入和嵌套图标组件的方式显得过于繁琐，也不够灵活。因此，为了更方便、更灵活地使用图标，我们可以引入 unplugin-icons 和 unplugin-vue-components 两个插件，使得我们可以直接在 Vue 组件中使用图标，并自动解析图标名称。

1. 问题描述

在当前项目中，我们使用 NaiveUI 的 n-icon 来嵌套图标或 SVG 图片。这种方式需要手动导入和解析每个图标组件，非常麻烦。而且，图标的使用形式显得不够简洁和优雅，如下图所示：

现在我们希望能够直接以类似 HTML 标签的方式来使用图标，无需导入和复杂的嵌套。实现效果如下：

2. 解决方案

为了解决上述问题，我们可以使用 unplugin-icons 和 unplugin-vue-components 两个插件。这两个插件可以简化图标的引入和使用流程，让我们可以直接在 Vue 组件中以标签的形式使用图标。

2.1 安装所需插件

首先，我们需要安装两个插件：unplugin-icons 和 unplugin-vue-components。

安装 unplugin-icons

unplugin-icons 是一个按需加载的图标解决方案，可以帮助我们在项目中轻松使用各种图标库。

使用 npm 安装：

npm install unplugin-icons -D

安装过程需要等待一段时间，请耐心等待。

安装 unplugin-vue-components

unplugin-vue-components 可以自动按需导入 Vue 组件，无需手动导入或注册。这对于我们想要简化图标使用的需求来说是非常有帮助的。

使用 npm 安装：

npm install unplugin-vue-components -D

2.2 配置 vue-cli 项目以使用插件

安装完插件后，我们需要在 vue.config.js 中进行相应的配置。

由于 Vue CLI 是基于 Webpack 的构建工具，因此我们需要导入 webpack 版本的插件模块：

• unplugin-icons/webpack
• unplugin-icons/resolver
• unplugin-vue-components/webpack

如果你使用的是 Vite，需要导入对应的 Vite 版本模块。

在 vue.config.js 中配置插件

在项目根目录下打开或创建 vue.config.js 文件，并将以下代码添加进去：

const {
  defineConfig,
} = require("@vue/cli-service");
const path = require("path");
const Icons = require('unplugin-icons/webpack');
const IconResolver = require('unplugin-icons/resolver');
const Components = require('unplugin-vue-components/webpack');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  configureWebpack: {
    plugins: [
      Components({
        dts: false, // 不生成 component.d.ts
        resolvers: [IconResolver({ componentPrefix: 'icon' })], // 遇到前缀为 icon 自动解析
      }),
      Icons({
        compiler: 'vue3',
        scale: 1,
        defaultClass: 'inline-block',
        autoInstall: true, // 自动安装
      }),
    ],
  },
});

• dts: 设置为 false 可以避免生成 component.d.ts 文件。你可以根据需要打开此选项。
• resolvers: 使用 IconResolver 解析器，并将前缀设置为 icon，这样任何 icon- 前缀的组件名称都会被自动解析为图标。
• autoInstall: 设置为 true，在使用图标时自动安装缺少的图标库。

2.3 在项目中使用图标

完成以上配置后，我们可以在项目中轻松使用图标。

步骤 1：查找需要的图标名称

你可以通过以下在线资源查找所需的图标名称：

• Icônes (icones.js.org): 一个简洁的图标预览和搜索平台。
• Icon Sets • Iconify: 提供更详细的图标库。

例如，找到图标名称为 gridicons:fullscreen-exit：

步骤 2：使用图标

在组件中直接使用 icon 前缀，并将图标名称中的冒号 : 替换为 -。这样，你可以像使用普通 HTML 标签一样使用图标。

例如：

<template>
  <hover-containter class="w-40px h-full" tooltip-content="全屏" @click="toggle">
    <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
    <icon-gridicons-fullscreen v-else class="text-18px" />
  </hover-containter>
</template>

<script setup lang='ts'>
import { useFullscreen } from '@vueuse/core';
import { HoverContainter } from '@components/BasicComponents/common/index';

const { isFullscreen, toggle } = useFullscreen()
</script>

<style scoped>
</style>

如上所示，我们可以非常方便地使用 icon-gridicons-fullscreen-exit 和 icon-gridicons-fullscreen 图标，而无需手动导入。

最后呈现的结果：

小结

通过以上步骤，我们可以看到，使用 unplugin-icons 和 unplugin-vue-components 插件后，图标的引入和使用变得更加便捷和高效。我们不再需要手动导入图标，也不需要在每个组件中进行复杂的配置。通过简单的配置，我们就可以在项目中灵活地使用各种图标，显著提升了开发效率。