在 Vue 3 中使用阿里巴巴矢量图标库

在项目中基本会用到图标，比较常见的就是阿里图标库。这篇文章主要介绍如何在vue3中使用图标库。

下载并全局注册自定义图标库

1. 手动下载阿里巴巴矢量图标库的字体文件：
   • 在阿里巴巴矢量图标库网站上选择您需要的图标，并将其添加到购物车。
   • 然后下载文件。
   • 解压下载的文件，将字体文件复制到您的 Vue 3 项目的合适目录例如 src/assets/fonts。
     
     
2. 在 MyIcon.vue 组件中使用自定义图标：

<template>
  <span :class="['iconfont', `${name}`]"></span>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

defineProps({
  name: {
      type: String ,
      required: true,
    }
});
</script>

<style scoped>

</style>

3. main.js文件引入

import { createApp } from 'vue';
import App from './App.vue';
import './assets/icons.css'; // 引入自定义图标样式文件
import MyIcon from '@/components/MyIcon/MyIcon.vue'; // 你自己的vue文件路径
const app = createApp(App);
app.component('MyIcon', MyIcon); // 使用
app.mount('#app');

4. 使用例子

<template>
  <div>
    <my-icon name="iconsearch"></my-icon>
   <!-- 这里的iconsearch是图标名字 -->
  </div>
</template>
<script setup lang="ts"></script>
<style lang=""></style>

效果如下：

使用svg添加图标

1. 安装插件vite-plugin-svg-icons

npm i vite-plugin-svg-icons;
//或者yarn
yarn add vite-plugin-svg-icons
// 或者pnpm
pnpm i vite-plugin-svg-icons

2. 在配置文件中引用。我使用的vite构建的项目，所以就在vite.config.js文件操作就行

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

//1、 引入插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
// 2、添加createSvgIconsPlugin
export default defineConfig({
  plugins: [vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
resolve: { alias: { '@': path.resolve('./src') } },
})

3. 在main.js文件引入

// 引入icon svg插件需要配置代码
import 'virtual:svg-icons-register'

4. 添加svg文件
   一般在assets目录下放svgIcon目录，然后创建你所需要的svg文件，我用的是一个collapse文件。
   
   放上svg代码就行了，比如：

<svg t="1684324017014" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1576"
    width="300" height="300">
    <path
        d="M631.808 838.784a32.704 32.704 0 0 1-32.704 32.704H32.64a32.704 32.704 0 0 1 0-65.408h566.464a32.704 32.704 0 0 1 32.704 32.704m0-217.6a32.64 32.64 0 0 1-32.704 32.64H32.64a32.704 32.704 0 0 1 0-65.344h566.464a32.704 32.704 0 0 1 32.704 32.704m187.84 0l138.944 138.944V482.24z m-187.84-217.6a32.704 32.704 0 0 1-32.704 32.704H32.64a32.64 32.64 0 0 1 0-65.344h566.464a32.704 32.704 0 0 1 32.704 32.64m371.968-30.144a32.704 32.704 0 0 1 20.224 30.144v435.776a32.704 32.704 0 0 1-55.808 23.104l-217.6-217.6a32.576 32.576 0 0 1 0-46.208l217.6-217.6a32.576 32.576 0 0 1 35.584-7.104M1024 186.24a32.704 32.704 0 0 1-32.704 32.704H32.64a32.704 32.704 0 0 1 0-65.344h958.656a32.64 32.64 0 0 1 32.704 32.64"
        p-id="1577"></path>
</svg>

5. 使用

<template>
  <h1>我是图标</h1>
  <svg>
  // 这里的使用你引入svg的文件名字 #icon-是固定的name替换成文件名就行
    <use href="#icon-collapse" color="blue" style="width: 16px; height:16px"></use>
  </svg>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
</script>
<style scoped></style>

效果如下图所示：

当然我只介绍了我熟悉的方式。如有问题欢迎留言讨论。