使用svg-sprite-loader 遇到的問題

安裝 svg-sprite-loader

npm install svg-sprite-loader --save

封裝組件

目錄結構

.
│  App.vue
│  main.js
├─components
│  └─SvgIcon
│          index.vue
│               
├─router
│      index.js
│      
├─store
│      actions.js
│      index.js
│      mutations.js
│      
├─svgIcons
│  │  index.js
│  │  
│  └─svg
│          certification.svg
│

給看官老爺奉上code

cd src/components/SvgIcon/index.vue
<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>
    .svg-icon{
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>
cd src/svgIcons/index.js
import Vue from "vue"
import SvgIcon from "@/components/SvgIcon"

Vue.component("svg-icon",SvgIcon);

const req = require.context("./svg",false,/\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
src/svgIcons/svg/xxx.svg
cd src/main/js
import './svgIcons'

修改webpack配置

  • 增加loader

    {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/svgIcons')],
        options: {
            symbolId: 'icon-[name]'
        }
    }
    
.. admonition:: 提示

     - 如果url-loader 已經引入了 svg 需要先排除(exclude)夹孔,如下代碼。
     
     
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    exclude: [resolve('src/svgIcons')],
    options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

到此準備工作全部就緒缀雳,如何在業(yè)務代碼里使用垢村?必殺技 :

<svg-icon icon-class='xxx' class="" style=""></svg-icon>

<p style="color: #FFB6C1">一招斃命 婆芦, 打完收工,??ヽ(°▽°)ノ?</p>

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市售担,隨后出現(xiàn)的幾起案子脊髓,更是在濱河造成了極大的恐慌辫愉,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件将硝,死亡現(xiàn)場離奇詭異恭朗,居然都是意外死亡屏镊,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門痰腮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來而芥,“玉大人,你說我怎么就攤上這事膀值」髫ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵沧踏,是天一觀的道長歌逢。 經常有香客問我,道長翘狱,這世上最難降的妖魔是什么秘案? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮潦匈,結果婚禮上阱高,老公的妹妹穿的比我還像新娘。我一直安慰自己茬缩,他們只是感情好赤惊,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著凰锡,像睡著了一般未舟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寡夹,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天处面,我揣著相機與錄音,去河邊找鬼菩掏。 笑死魂角,一個胖子當著我的面吹牛,可吹牛的內容都是我干的智绸。 我是一名探鬼主播野揪,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼瞧栗!你這毒婦竟也來了斯稳?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤迹恐,失蹤者是張志新(化名)和其女友劉穎挣惰,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡憎茂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年珍语,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片竖幔。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡板乙,死狀恐怖,靈堂內的尸體忽然破棺而出拳氢,到底是詐尸還是另有隱情募逞,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布馋评,位于F島的核電站放接,受9級特大地震影響,放射性物質發(fā)生泄漏栗恩。R本人自食惡果不足惜透乾,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一洪燥、第九天 我趴在偏房一處隱蔽的房頂上張望磕秤。 院中可真熱鬧,春花似錦捧韵、人聲如沸市咆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蒙兰。三九已至,卻和暖如春芒篷,著一層夾襖步出監(jiān)牢的瞬間搜变,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工针炉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留挠他,地道東北人。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓篡帕,卻偏偏與公主長得像殖侵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子镰烧,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內容