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