第一步
npm 下载
npm i vite-plugin-svg-icons -D
yarn下载
yarn add vite-plugin-svg-icons -D
第二步在main.ts文件引入
// 引入svg注册脚本
import 'virtual:svg-icons-register'
第三步在项目中新建存放svg图片的文件夹
第四步 在vite.config.js 配置svg文件路径,以及规则
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
import {
createSvgIconsPlugin} from 'vite-plugin-svg-icons'
export default defineConfig({
resolve: {
// Vite路径别名配置
alias: {
'@': path.resolve('./src'), // @代替src
},
},
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
vue(),
createSvgIconsPlugin({
// 配置svg文件路径
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式,规则
symbolId: '[name]',
})
],
});
第五步组件封装 src/components/SvgIcon.vue
<template>
<svg aria-hidden="true" class="svg-icon">
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import {
computed } from 'vue';
const props = defineProps({
prefix: {
type: String,
default: 'icon',
},
iconClass: {
type: String,
required: false,
},
color: {
type: String,
default: '',
},
});
const symbolId = computed(() => `#${
props.iconClass}`);
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */
fill: currentColor; /* 定义元素的颜色,currentColor是一个变量,这个变量的值就表示当前元素的color值,如果当前元素未设置color值,则从父元素继承 */
overflow: hidden;
}
</style>
第六步按需引入
<template>
<SvgIcon icon-class='Collection-off'/>
</template>
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue'
</script>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
全局引入方式
在main.ts里引入svg组件
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import SvgIcon from '@/components/SvgIcon.vue'
// 引入svg注册脚本
import 'virtual:svg-icons-register';
// 注册全局组件
const app = createApp(App);
app.component('PxPagination', SvgIcon);
createApp(App).mount('#app')
使用
<template>
<SvgIcon icon-class='Collection-off'/>
<script setup lang="ts">
// import SvgIcon from '@/components/SvgIcon.vue'
</script>
</template>
svg不显示的原因可参考以下几种:
1、是否在main.ts中引入注册脚本(参考第二步操作)
2、svg存放的文件路径是否和vite.config.js配置的路径相同(参考第三步,第四步)
3、svg组件封装 symbolId是否和vite.config.js配置的规则相同(参考第三步,第四步)