Vue封裝svg-icon組件使用教程
一、SVG可縮放矢量圖形
SVG（Scalable Vector Graphics）可縮放矢量圖形，是一種用于描述基于二維的矢量圖形的 XML 標(biāo)記語(yǔ)言，其基本矢量顯示對(duì)象包括矩形、圓、橢圓、多邊形、直線(xiàn)、任意曲線(xiàn)等，還能顯示文字對(duì)象和嵌入式外部圖像（包括 PNG、JPEG、SVG 等）。實(shí)際項(xiàng)目中大多數(shù)圖標(biāo)都是使用的 SVG 圖標(biāo)文件，其主要有以下幾個(gè)優(yōu)點(diǎn)：
1.內(nèi)容可讀，文件是純粹的 XML。
2.圖像文件小，可伸縮性強(qiáng)。
3.矢量放縮，能以不犧牲圖像質(zhì)量為前提，進(jìn)行任意縮放。
4.還能基于 DOM 模型實(shí)現(xiàn)動(dòng)態(tài)和一些交互功能
二、SVG在vue項(xiàng)目中的配置與使用
1. 下載
npm install vue-svg-icon xml-loader -D
2. 下載的.svg的文件，存放于src/icons/svg文件
3. 配置src/icons/index.js文件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
// 在./svg下查找 “.svg”文件
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
4.在main.js中引入icon/index.js文件中全局設(shè)置
//全局加載就可以了 import '@/icons/index.js'
5. 封裝組件
/src/components/svgIcon/index.vue
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" rel="external nofollow" />
</svg>
</template>
<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils'
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>
6.頁(yè)面使用
<div> <svg-icon icon-class="peoples" /> </div>
到目前為止使用 < svg-icon icon-class=“left-indent” /> 還沒(méi)有效果，因?yàn)檫€缺少配置文件
7. vue.config.js 中配置 svg-sprite-loader
安裝：
npm install svg-sprite-loader -D
配置 vue.config.js：
使用chainWebpack方法可自定義配置 loader vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
重啟項(xiàng)目遇到報(bào)錯(cuò)：error: resolve is not defined
在vue.config.js中沒(méi)有配置 resolve 方法， 需要自定義一個(gè)，代碼如下
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
此時(shí)，圖標(biāo)在頁(yè)面已經(jīng)出效果；
到此這篇關(guān)于Vue封裝svg-icon組件使用教程的文章就介紹到這了,更多相關(guān)Vue svg icon組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說(shuō)明
這篇文章主要介紹了vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
集成vue-cli腳手架里面的二維碼插件貌似很多，一般都會(huì)滿(mǎn)足大部分需求，這次就講一下插件vue-qriously生成二維碼效果，感興趣的朋友一起看看吧2022-04-04
vue el-table實(shí)現(xiàn)行內(nèi)編輯功能
這篇文章主要為大家詳細(xì)介紹了vue el-table實(shí)現(xiàn)行內(nèi)編輯功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了使用vuepress搭建靜態(tài)博客的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
本文主要介紹了vue3生成隨機(jī)密碼的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
關(guān)于Vue.nextTick()的正確使用方法淺析
最近在項(xiàng)目中遇到了一個(gè)需求，我們通過(guò)Vue.nextTick()來(lái)解決這一需求，但發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以自己來(lái)總結(jié)下，下面這篇文章主要給大家介紹了關(guān)于Vue.nextTick()正確使用方法的相關(guān)資料，需要的朋友可以參考下。2017-08-08
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點(diǎn)說(shuō)就是使用配置文件來(lái)管理多環(huán)境，實(shí)現(xiàn)環(huán)境的切換，西阿棉詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件(推薦)
這篇文章主要介紹了使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件 ,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue3中使用sse最佳實(shí)踐,封裝工具,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08