vue3中引入svg矢量圖的實(shí)現(xiàn)示例
更新時(shí)間：2023年11月24日 15:57:06 作者：前端~初學(xué)者
在項(xiàng)目開(kāi)發(fā)過(guò)程中,我們經(jīng)常會(huì)用到svg矢量圖,本文主要介紹了vue3中引入svg矢量圖的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
1、前言
在項(xiàng)目開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)用到svg矢量圖,而且我們使用svg以后，頁(yè)面上加載的不再是圖片資源，這對(duì)頁(yè)面性能來(lái)說(shuō)是個(gè)很大的提升，而且我們svg文件比img要小的很多，放在項(xiàng)目中幾乎不占用資源。
2、安裝SVG依賴(lài)插件
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入口文件導(dǎo)入
import 'virtual:svg-icons-register'
5、使用svg
5.1 在src/assets/icons文件夾下引入svg矢量圖
5.2 在src/components目錄下創(chuàng)建一個(gè)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
//引入項(xiàng)目中的全局組件
import SvgIcon from '@/components/svgIcon.vue'
//全局對(duì)象
const allGlobalComponents = { SvgIcon }
//對(duì)外暴露插件對(duì)象
export default {
install(app) {
//注冊(cè)項(xiàng)目的全部組件
Object.keys(allGlobalComponents).forEach((key) => {
//注冊(cè)為全局組件
app.component(key, allGlobalComponents[key])
})
},
}
5.4 在main.ts中引入plugin/index.ts文件
import GlobalComponents from '@/plugin' app.use(GlobalComponents)
5.5 在頁(yè)面使用
<svg-icon name="tick" width="20px" height="20px"></svg-icon>
到此這篇關(guān)于vue3中引入svg矢量圖的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue3引入svg矢量圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue2中使用sass并配置全局的sass樣式變量的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)
el-tooltip組件本身就是懸浮提示功能,在對(duì)它進(jìn)行二次封裝時(shí),實(shí)現(xiàn)超出的文本浮現(xiàn),本文就來(lái)介紹一下vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn),感興趣的可以了解一下2023-12-12
elementui?el-table底層背景色修改簡(jiǎn)單方法
最近在做項(xiàng)目的時(shí)候遇到個(gè)需求,需要修改el-table背景色,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于elementui?el-table底層背景色修改的相關(guān)資料,需要的朋友可以參考下2023-10-10
laravel-admin 與 vue 結(jié)合使用實(shí)例代碼詳解
由于 Laravel-admin 采用的是 pjax 的方式刷新頁(yè)面，意味著很多頁(yè)面刷新的操作，這篇文章主要介紹了laravel-admin 與 vue 結(jié)合使用,需要的朋友可以參考下2019-06-06
vue中keep-alive組件使用和一些基礎(chǔ)配置方法
本文主要介紹了Vue中keep-alive組件的使用方法和一些基礎(chǔ)配置,keep-alive是Vue中的一個(gè)抽象組件,可以緩存組件實(shí)例,提高性能,本文給大家介紹vue中keep-alive組件使用和一些基礎(chǔ)配置方法,感興趣的朋友一起看看吧2024-10-10
Vue實(shí)現(xiàn)Base64編碼與解碼的代碼示例
在Web開(kāi)發(fā)中,Base64編碼常用于將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為文本字符串,以便在網(wǎng)絡(luò)上傳輸,在Vue.js應(yīng)用中,Base64編碼廣泛應(yīng)用于圖像的嵌入,本文將詳細(xì)介紹如何在Vue.js中實(shí)現(xiàn)Base64編碼與解碼,并提供多種示例和實(shí)現(xiàn)思路,需要的朋友可以參考下2024-09-09
ElementUI是一套基于VUE2.0的桌面端組件庫(kù),ElementUI提供了豐富的組件幫助開(kāi)發(fā)人員快速構(gòu)建功能強(qiáng)大、風(fēng)格統(tǒng)一的頁(yè)面,本文給大家分享elementui簡(jiǎn)易介紹,感興趣的朋友一起看看吧2024-01-01
使用Element時(shí)默認(rèn)勾選表格toggleRowSelection方式
這篇文章主要介紹了使用Element時(shí)默認(rèn)勾選表格toggleRowSelection方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹了關(guān)于Vue入門(mén)的相關(guān)資料，是一篇超完整的Vue入門(mén)教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
下面小編就為大家分享一篇基于vue.js中事件修飾符.self的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02