一、講原理svg-sprite，和css-sprite有點(diǎn)像，就是先把所有的svg圖放頁面上，但是不現(xiàn)實(shí)，用的時候去取。

官方說法：

symbol元素用來定義一個圖形模板對象，它可以用一個元素實(shí)例化。symbol元素對圖形的作用是在同一文檔中多次使用，添加結(jié)構(gòu)和語義。結(jié)構(gòu)豐富的文檔可以更生動地呈現(xiàn)出來，類似講演稿或盲文，從而提升了可訪問性。注意，一個symbol元素本身是不呈現(xiàn)的。只有symbol元素的實(shí)例(亦即，一個引用了symbol的?元素)才能呈現(xiàn)。

聯(lián)系一下我剛才說的svg-sprite你就知道了，就是我們要把我們所有svg的單個放到這個標(biāo)簽里，然后再起個ID,用的時候一找這個id就出來。非常完美。原理還有更有深度的東西可以自己百度去吧。

那我們要用時候不能挨個寫標(biāo)簽，挨個放進(jìn)去吧，那就太麻煩了，所有用這個插件svg-sprite-loader，我們只需要準(zhǔn)備下svg圖，然后起個好記的名字。然后svg是美工給你的，所以你只需要改名字。。為了就是這個，要不誰用他

npm?install?svg-sprite-loader?--save-dev

接下來在vue.config.js里加這些東西。上代碼

先找到這個位置

這個位置是配置webpack額外配置的，因?yàn)関ue-cli3已經(jīng)幫你配置好了，但是對于這需求各種變的年代。不改是不可能的，還不如在webpack里配置呢。。吐槽一下。接下來就把下邊這些代碼放進(jìn)去

const svgRule = config.module.rule('svg');

// 清除已有的所有 loader。

// 如果你不這樣做，接下來的 loader 會附加在該規(guī)則現(xiàn)有的 loader 之后。

svgRule.uses.clear();

svgRule

.test(/\.svg$/)

.include.add(path.resolve(__dirname, './src/icons/svg'))

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]'

});

const fileRule = config.module.rule('file');

fileRule.uses.clear();

fileRule

.test(/\.svg$/)

.exclude.add(path.resolve(__dirname, './src/icons/svg'))

.end()

.use('file-loader')

.loader('file-loader');

你不要納悶，為啥配置這svg的規(guī)則又配置了下file,這個就是坑。

來先看一下package.json

這個開發(fā)依賴也沒有file-loader啊，配置他干嘛。。我就為了這個都哭，看著沒有，實(shí)際上有，就是這些vue/cli的某個的以來還是用的是file-loader所以你要是不配置的話，就會有兩個東西去處理你的svg，文件。他會告訴你需要你一個loader,實(shí)際上你有倆。

此時按我這個配置就可以了。為了證明有，你看看這個。。

然后自己寫個組件。，再用webpack的

require.context方法把那些svg導(dǎo)入進(jìn)來。這個方法作用就是把所有的svg億import形式引入進(jìn)來。

看代碼

先看組件

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';

}

}

}

};

.svg-icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

用的時候就是icon-class里的就是svg你開始的命名，別整中文啊。后邊這個class-name就是你自定義的class,要設(shè)置大小記得font-size可別width,height啥的。。那就很尷尬了

接下來就是如何引入的svg的進(jìn)入頁面的

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);

先把組件全局注冊，然后引入組件；

如果看不懂就直接百度require.context然后你就懂了。

這個時候再去main.js里引入就好了。(別忘了這一步)

import './icons'; // icon

你就可以用了，而且是頁面各個角度的用。你要看一下dom結(jié)構(gòu)有沒有這個。

有你就大膽用吧，啥毛病沒有，沒有的話，是不是你svg名字給寫錯了。其他都沒錯了還是不顯示就去檢查這個webpack的配置吧和控制臺的錯誤輸出。其他就只有碰到了才清楚。

現(xiàn)在最新版給的方法是這個(先別急著用)

1.在對應(yīng)vue項(xiàng)目里添加插件

vue?add svg-sprite

2.再執(zhí)行：

npm?install?svgo svgo-loader?--save-dev

這里開發(fā)以來會增加一個vue-cli-svg-sprite和svgo和svgo-loader

因?yàn)閟vgo可以整理svg的某些東西，去掉或者增加，反正是可以批量處理他們，以方便我們使用。他會給我們自動生成一個已經(jīng)寫好的組件? 到時候你引入這個組件就可以了。我的情況就是沒找到原因就是一直不顯示還不報錯。so,我拋棄了他，使用了上邊的方法，實(shí)際上vue-cli-svg-sprite的依賴也是svg-sprite-loader，沒準(zhǔn)問題也是file-loader的事，應(yīng)該是我的某些配置問題。如果有大神知道原因，希望你告訴我一下吧。最近沒空去探尋真理，實(shí)現(xiàn)了先用。

總結(jié)

以上是生活随笔為你收集整理的vuecli3的svgicon_vue-cli3引入svg图标全过程以及遇到的坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。