vue3中引入svg矢量圖的實現(xiàn)示例
更新時間：2023年11月24日 15:57:06 作者：前端~初學者
在項目開發(fā)過程中,我們經(jīng)常會用到svg矢量圖,本文主要介紹了vue3中引入svg矢量圖的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下
1、前言
在項目開發(fā)過程中，我們經(jīng)常會用到svg矢量圖,而且我們使用svg以后，頁面上加載的不再是圖片資源，這對頁面性能來說是個很大的提升，而且我們svg文件比img要小的很多，放在項目中幾乎不占用資源。
2、安裝SVG依賴插件
npm install vite-plugin-svg-icons -D 或 yarn add vite-plugin-svg-icons -D 或 pnpm install vite-plugin-svg-icons -D
3、在vite.config.ts 中配置插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
return {
plugins: [
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
symbolId: 'icon-[dir]-[name]',
}),
],
}
}
4、main.ts入口文件導入
import 'virtual:svg-icons-register'
5、使用svg
5.1 在src/assets/icons文件夾下引入svg矢量圖
5.2 在src/components目錄下創(chuàng)建一個SvgIcon組件
<template>
<svg :style="{ width, height }">
<use :xlink:href="prefix + name" rel="external nofollow" :fill="color"></use>
</svg>
</template>
<script setup>
defineProps({
// 是否顯示
prefix: {
type: String,
default: '#icon-',
},
name: String,
color: {
type: String,
default: '#000',
},
width: {
type: String,
default: '16px',
},
height: {
type: String,
default: '16px',
},
})
</script>
<style lang='scss' scoped></style>
5.3 封裝成全局組件，在src文件夾下創(chuàng)建plugin/index.ts
//引入項目中的全局組件
import SvgIcon from '@/components/svgIcon.vue'
//全局對象
const allGlobalComponents = { SvgIcon }
//對外暴露插件對象
export default {
install(app) {
//注冊項目的全部組件
Object.keys(allGlobalComponents).forEach((key) => {
//注冊為全局組件
app.component(key, allGlobalComponents[key])
})
},
}
5.4 在main.ts中引入plugin/index.ts文件
import GlobalComponents from '@/plugin' app.use(GlobalComponents)
5.5 在頁面使用
<svg-icon name="tick" width="20px" height="20px"></svg-icon>
到此這篇關(guān)于vue3中引入svg矢量圖的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue3引入svg矢量圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-table?選中行與復選框相互聯(lián)動的實現(xiàn)步驟
這篇文章主要介紹了el-table?選中行與復選框相互聯(lián)動,分為兩步，第一步點擊行時觸發(fā)復選框的選擇或取消，第二步點擊復選框時觸發(fā)相應行的變化，本文通過實例代碼給大家詳細講解，需要的朋友可以參考下2022-10-10
vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue Element UI 解決表格數(shù)據(jù)不更新問題及解決方案
在使用Vue和ElementUI開發(fā)后臺管理系統(tǒng)時,可能會遇到表格數(shù)據(jù)不更新的問題,這通常是因為Vue的響應式系統(tǒng)未檢測到數(shù)據(jù)變化或數(shù)據(jù)更新后未正確觸發(fā)視圖的重新渲染,本文給大家介紹vue Element UI 解決表格數(shù)據(jù)不更新問題,感興趣的朋友一起看看吧2024-10-10
Vue項目中使用v-for指令進行列表渲染以及優(yōu)化其性能
Vue中v-for用于列表渲染,需配合key屬性提升性能,避免狀態(tài)混亂,優(yōu)化方法包括使用計算屬性、虛擬滾動、減少內(nèi)聯(lián)事件等,確保key唯一且非索引2025-07-07
這篇文章主要為大家介紹了十分鐘封裝一個好用的axios步驟示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
vue如何使用element-ui 實現(xiàn)自定義分頁
這篇文章主要介紹了vue如何使用element-ui 實現(xiàn)自定義分頁,可以通過插槽實現(xiàn)自定義的分頁,本文通過實例圖文相結(jié)合給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了vue3中vite使用sass的配置方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細講解的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關(guān)于vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內(nèi)部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this（不需要實例化的組件）,這篇文章主要給大家介紹了關(guān)于Vue.js函數(shù)式組件的相關(guān)資料,需要的朋友可以參考下2021-10-10