Vue中使用SVG-ICON的配置方法
更新時間：2024年02月21日 11:20:36 作者：mole
在項目開發(fā)中,經(jīng)常會用到svg圖標(biāo),之前用的都是vue-svg-icon,接下來通過本文給大家介紹Vue中使用SVG-ICON的配置方法,感興趣的朋友跟隨小編一起看看吧
在Vue中使用svg-icon，可以按如下配置即可。
1、src/components/SvgIcon目錄下創(chuàng)建index.vue，代碼如下：
<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" rel="external nofollow" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName () {
return `#icon-${this.iconClass}`
},
svgClass () {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>2、src/assets/icons/下創(chuàng)建index.js，代碼如下：
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg組件
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)3、src/assets/icons/svg目錄下，放置用到的svg圖片文件，如圖中user.svg
4、main.js文件中增加對icons的引用，代碼如下：
import './assets/icons'
5、build目錄中的webpack.base.conf.js的module.rules節(jié)點中增加如下代碼：
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/assets/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/assets/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},6、config目錄中的index.js的build節(jié)點中增加如下代碼：
chainWebpack(config) {
// set svg-sprite-loader
config.module
rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}注：上述一步有些項目是用vue.config.js文件配置的，具體看具體配置。
7、執(zhí)行下列命令安裝 svg-sprite-loader 插件
npm install svg-sprite-loader --save-dev
8、代碼中如何引用 svg 圖標(biāo)
<svg-icon icon-class="user"></svg-icon>
到此這篇關(guān)于Vue中使用SVG-ICON的文章就介紹到這了,更多相關(guān)Vue使用SVG-ICON內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決Vue使用百度地圖BMapGL內(nèi)存泄漏問題?Out?of?Memory
這篇文章主要介紹了解決Vue使用百度地圖BMapGL內(nèi)存泄漏問題?Out?of?Memory，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
文章介紹了如何在Vue項目中安裝和使用moment.js,包括安裝步驟、導(dǎo)入方法、漢化設(shè)置以及在Vue實例中使用moment.js進行日期處理2024-11-11
下面小編就為大家分享一篇vue 實現(xiàn)類似淘寶星級評分的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue最簡單的前后端交互示例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作
這篇文章主要介紹了理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇
項目中需要選擇時間范圍,并且只能選擇當(dāng)前日期之后的七天,本文就來介紹了vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要給大家介紹了關(guān)于Vue.js列表渲染的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
<script setup>是在單文件組件中使用Composition API的編譯時語法糖,下面這篇文章主要給大家介紹了關(guān)于vue3:setup語法糖使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue.js實現(xiàn)用戶評論、登錄、注冊、及修改信息功能
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)用戶評論、登錄、注冊、及修改信息功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue3中defineComponent?的作用,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09