在vue-cli3中利用svg-sprite-loader加載svg圖標(biāo)

github地址 https://github.com/miaolianfen/vue-demo
歡迎給個小星星灸叼,哈哈

一、安裝

首先先安裝svg-sprite-loader

npm i svg-sprite-loader -D

二、創(chuàng)建存放svg的文件夾

在項(xiàng)目的src文件下創(chuàng)建icons/svg文件夾,此文件夾專門用來存放icons的小圖標(biāo),將來會從該文件夾中讀取所有的icons圖標(biāo)

三. 修改規(guī)則和新增規(guī)則

在vue-cli3中默認(rèn)已經(jīng)配了對svg處理的規(guī)則(見下圖)

image.png

所以在vue.config.js里擴(kuò)展webpack的配置辖佣,首先要排除file-loader對我們icons文件夾的處理,然后利用svg-sprite-loader對icons文件夾的進(jìn)行專門的處理

const path=require('path')
 // resolve定義一個絕對路徑獲取函數(shù)
function resolve(dir){
    return path.join(__dirname,dir)
}
module.exports = {
    chainWebpack(config){
        //排除icons目錄中svg文件處理
        config.module.rule('svg')
        .exclude.add(resolve('src/icons'))
        .end()
        //設(shè)置svg-sprite-loader處理icons目錄中的svg
        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()
    }
 }

四. 創(chuàng)建svg-icon組件

 <template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </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>

五. 圖標(biāo)自動導(dǎo)入并全局引用組件

在icons文件下下面創(chuàng)建index.js文件搓逾,來做上面創(chuàng)建的組件的全局注冊和自動導(dǎo)入svg文件夾下面所有的svg圖標(biāo)

// 全局引入SvgIcon組件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
Vue.component('svg-icon', SvgIcon)

// 設(shè)置icons/svg下面的圖片自動導(dǎo)入
const req = require.context('./svg', false, /\.svg$/);
req.keys().map(req);

最后不要忘了在main.js 中引用icons/index.js

六. 使用

使用方法如下:

<svg-icon icon-class="home"></svg-icon>

github地址 https://github.com/miaolianfen/vue-demo
轉(zhuǎn)載請作說明
歡迎給個小星星卷谈,哈哈

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市霞篡,隨后出現(xiàn)的幾起案子世蔗,更是在濱河造成了極大的恐慌,老刑警劉巖朗兵,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件污淋,死亡現(xiàn)場離奇詭異,居然都是意外死亡余掖,警方通過查閱死者的電腦和手機(jī)寸爆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盐欺,“玉大人赁豆,你說我怎么就攤上這事∪呙溃” “怎么了魔种?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長粉洼。 經(jīng)常有香客問我节预,道長,這世上最難降的妖魔是什么属韧? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任心铃,我火速辦了婚禮,結(jié)果婚禮上挫剑,老公的妹妹穿的比我還像新娘。我一直安慰自己柱衔,他們只是感情好樊破,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著唆铐,像睡著了一般哲戚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上艾岂,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天顺少,我揣著相機(jī)與錄音,去河邊找鬼。 笑死脆炎,一個胖子當(dāng)著我的面吹牛梅猿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播秒裕,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼袱蚓,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了几蜻?” 一聲冷哼從身側(cè)響起喇潘,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎梭稚,沒想到半個月后颖低,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡弧烤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年忱屑,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扼褪。...
    茶點(diǎn)故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡想幻,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出话浇,到底是詐尸還是另有隱情脏毯,我是刑警寧澤,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布幔崖,位于F島的核電站食店,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏赏寇。R本人自食惡果不足惜吉嫩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望嗅定。 院中可真熱鬧自娩,春花似錦、人聲如沸渠退。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碎乃。三九已至姊扔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間梅誓,已是汗流浹背恰梢。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工佛南, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嵌言。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓嗅回,卻偏偏與公主長得像,于是被迫代替她去往敵國和親呀页。 傳聞我的和親對象是個殘疾皇子妈拌,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,585評論 2 359

推薦閱讀更多精彩內(nèi)容