在项目中基本会用到图标,比较常见的就是阿里图标库。这篇文章主要介绍如何在vue3中使用图标库。
下载并全局注册自定义图标库
- 手动下载阿里巴巴矢量图标库的字体文件:
- 在阿里巴巴矢量图标库网站上选择您需要的图标,并将其添加到购物车。
- 然后下载文件。
- 解压下载的文件,将字体文件复制到您的 Vue 3 项目的合适目录例如
src/assets/fonts
。
- 在
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>
- 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');
- 使用例子
<template>
<div>
<my-icon name="iconsearch"></my-icon>
<!-- 这里的iconsearch是图标名字 -->
</div>
</template>
<script setup lang="ts"></script>
<style lang=""></style>
效果如下:
使用svg添加图标
- 安装插件vite-plugin-svg-icons
npm i vite-plugin-svg-icons;
//或者yarn
yarn add vite-plugin-svg-icons
// 或者pnpm
pnpm i vite-plugin-svg-icons
- 在配置文件中引用。我使用的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') } },
})
- 在main.js文件引入
// 引入icon svg插件需要配置代码
import 'virtual:svg-icons-register'
- 添加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>
- 使用
<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>
效果如下图所示:
当然我只介绍了我熟悉的方式。如有问题欢迎留言讨论。