[JavaScript知识库]自动导入并解析Icon【插件使用、Vue3、Vue-cli】

问题描述

当前项目中，需要用到很多Icon，每次都需要导入和解析Icon会显得很麻烦。
而且当前使用的naiveUI使用Icon显得比较呆板，需要n-icon嵌套后，再放入组件或者svg格式图片

但是，现在我想直接想这样使用。

解决方法

1.安装对应的两个插件

可能出现的问题

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.

• unplugin-icons

  npm install unplugin-icons -D
  

  

  需要等待一段时间…有一点点久…才能安装成功

• unplugin-vue-components

  npm install unplugin-vue-components -D
  

2.Vue-cli配置插件

在安装两个对应的插件后，需要导入

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

因为vue-cli是使用内置webpack进行打包的，所以需要导入的webpack

若使用的为vite导入对应的vite即可

打开项目中的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) {
  /**
   * __dirname：当前文件夹所在的绝对路径
   */
  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打开，则会生成文件components.d.ts

3.在项目中使用

①寻找自己所需要的icon名称

Ic?nes (icones.js.org)——简略版

Icon Sets ? Iconify——详细版

现在我找到对应的icon名字为gridicons:fullscreen-exit

②加上icon前缀

直接以icon为前缀，直接在后面添加名称——自动安装

:直接以-代替

<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>

最后呈现的结果

OK~

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系