vue3+vite2中使用svg的方法詳解(親測(cè)可用)
技術(shù)棧：vue3+vite2
前言：
寫過(guò)一版基于vue-cli中使用svg的方法，但是因?yàn)閣ebpack提供了require.context()在vite中無(wú)法使用，所以基于vite構(gòu)建的項(xiàng)目則采取另一種方法
一、安裝vite-plugin-svg-icons
此處還需要安裝下fast-glob相關(guān)依賴，不然vite運(yùn)行npm run dev時(shí)會(huì)報(bào)Cannot find module 'fast-glob’的錯(cuò)誤
npm i fast-glob@3.x -D npm i vite-plugin-svg-icons@2.x -D
二、在src/components/svgIcon下新建組件index.vue
<template>
<svg aria-hidden="true" class="svg-icon">
<use :xlink:href="symbolId" rel="external nofollow" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
prefix: {type: String,default: 'icon',},
iconClass: {type: String,required: true,},
color: {type: String,default: ''}
})
const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
overflow: hidden;
fill: currentColor;
}
</style>
三、tsconfig.json中添加設(shè)置
types用來(lái)指定需要包含的模塊，只有在這里列出的模塊的聲明文件才會(huì)被加載進(jìn)來(lái)。非必要添加，我在兩個(gè)demo測(cè)試的時(shí)候，一個(gè)需要一個(gè)不需要，若有問題可以嘗試添加
{
"compilerOptions": {
"types": ["vite-plugin-svg-icons/client"]
}
}
四、vite.config.ts 中的配置插件
import { resolve } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
plugins: [
createSvgIconsPlugin({
// 指定需要緩存的圖標(biāo)文件夾
iconDirs: [resolve(process.cwd(), 'src/assets/imgs/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
})
]
})
五、在main.ts全局注冊(cè)組件
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import { store, key } from '@/store'
const app = createApp(App)
import 'virtual:svg-icons-register' // 引入注冊(cè)腳本
import SvgIcon from '@/components/svgIcon/index.vue' // 引入組件
app.component('svg-icon', SvgIcon)
app.use(router).use(store, key).mount('#app')
六、在頁(yè)面中使用
<template> <svg-icon icon-class="category"></svg-icon> <svg-icon icon-class="accountant" style="width: 10em; height: 10em;border: 1px solid #000000;"></svg-icon> </template>
七、文件目錄結(jié)構(gòu)及其效果展示
八、參考鏈接地址
1、依賴官方參考文檔：https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md
2、其中有一些內(nèi)容點(diǎn)我根據(jù)該文章進(jìn)行參考：https://www.cnblogs.com/haoxianrui/archive/2022/04/02/16090029.html
3、在vue-cli中使用svg的可以參考我另一篇文章：http://www.dbjr.com.cn/article/258653.htm
總結(jié)
到此這篇關(guān)于vue3+vite2中使用svg的文章就介紹到這了,更多相關(guān)vue3+vite2使用svg內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于導(dǎo)入、配置Vuetify遇到的幾個(gè)問題
這篇文章主要介紹了關(guān)于導(dǎo)入、配置Vuetify遇到的幾個(gè)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue使用H5的audio標(biāo)簽問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02
這篇文章主要介紹了Vue之計(jì)算屬性的相關(guān)知識(shí)，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
Vue中@keyup.enter?@v-model.trim的用法小結(jié)
這篇文章主要介紹了Vue中@keyup.enter?@v-model.trim的用法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-12-12
Vue3使用dataV報(bào)錯(cuò)問題的解決方法
這篇文章主要為大家詳細(xì)介紹了Vue3中使用dataV報(bào)錯(cuò)問題的解決方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
vue中按鈕操作完刷新頁(yè)面的實(shí)現(xiàn)
這篇文章主要介紹了vue中按鈕操作完刷新頁(yè)面的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)
這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue?eslint報(bào)錯(cuò):Component?name?“xxxxx“?should?always?be?
新手在使用腳手架時(shí)總會(huì)報(bào)各種錯(cuò),下面這篇文章主要給大家介紹了關(guān)于vue?eslint報(bào)錯(cuò):Component?name?“xxxxx“?should?always?be?multi-word.eslintvue的4種解決方案,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了淺談vuex為什么不建議在action中修改state，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02