vuecli3的svgicon_vue-cli3引入svg图标全过程以及遇到的坑
一、講原理svg-sprite,和css-sprite有點(diǎn)像,就是先把所有的svg圖放頁(yè)面上,但是不現(xiàn)實(shí),用的時(shí)候去取。
官方說(shuō)法:
symbol元素用來(lái)定義一個(gè)圖形模板對(duì)象,它可以用一個(gè)元素實(shí)例化。symbol元素對(duì)圖形的作用是在同一文檔中多次使用,添加結(jié)構(gòu)和語(yǔ)義。結(jié)構(gòu)豐富的文檔可以更生動(dòng)地呈現(xiàn)出來(lái),類(lèi)似講演稿或盲文,從而提升了可訪問(wèn)性。注意,一個(gè)symbol元素本身是不呈現(xiàn)的。只有symbol元素的實(shí)例(亦即,一個(gè)引用了symbol的?元素)才能呈現(xiàn)。
聯(lián)系一下我剛才說(shuō)的svg-sprite你就知道了,就是我們要把我們所有svg的單個(gè)放到這個(gè)標(biāo)簽里,然后再起個(gè)ID,用的時(shí)候一找這個(gè)id就出來(lái)。非常完美。原理還有更有深度的東西可以自己百度去吧。
那我們要用時(shí)候不能挨個(gè)寫(xiě)標(biāo)簽,挨個(gè)放進(jìn)去吧,那就太麻煩了,所有用這個(gè)插件svg-sprite-loader,我們只需要準(zhǔn)備下svg圖,然后起個(gè)好記的名字。然后svg是美工給你的,所以你只需要改名字。。為了就是這個(gè),要不誰(shuí)用他
npm?install?svg-sprite-loader?--save-dev
接下來(lái)在vue.config.js里加這些東西。上代碼
先找到這個(gè)位置
這個(gè)位置是配置webpack額外配置的,因?yàn)関ue-cli3已經(jīng)幫你配置好了,但是對(duì)于這需求各種變的年代。不改是不可能的,還不如在webpack里配置呢。。吐槽一下。接下來(lái)就把下邊這些代碼放進(jìn)去
const svgRule = config.module.rule('svg');
// 清除已有的所有 loader。
// 如果你不這樣做,接下來(lái)的 loader 會(huì)附加在該規(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,這個(gè)就是坑。
來(lái)先看一下package.json
這個(gè)開(kāi)發(fā)依賴(lài)也沒(méi)有file-loader啊,配置他干嘛。。我就為了這個(gè)都哭,看著沒(méi)有,實(shí)際上有,就是這些vue/cli的某個(gè)的以來(lái)還是用的是file-loader所以你要是不配置的話,就會(huì)有兩個(gè)東西去處理你的svg,文件。他會(huì)告訴你需要你一個(gè)loader,實(shí)際上你有倆。
此時(shí)按我這個(gè)配置就可以了。為了證明有,你看看這個(gè)。。
然后自己寫(xiě)個(gè)組件。,再用webpack的
require.context方法把那些svg導(dǎo)入進(jìn)來(lái)。這個(gè)方法作用就是把所有的svg億import形式引入進(jìn)來(lái)。
看代碼
先看組件
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;
}
用的時(shí)候就是icon-class里的就是svg你開(kāi)始的命名,別整中文啊。后邊這個(gè)class-name就是你自定義的class,要設(shè)置大小記得font-size可別width,height啥的。。那就很尷尬了
接下來(lái)就是如何引入的svg的進(jìn)入頁(yè)面的
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);
先把組件全局注冊(cè),然后引入組件;
如果看不懂就直接百度require.context然后你就懂了。
這個(gè)時(shí)候再去main.js里引入就好了。(別忘了這一步)
import './icons'; // icon
你就可以用了,而且是頁(yè)面各個(gè)角度的用。你要看一下dom結(jié)構(gòu)有沒(méi)有這個(gè)。
有你就大膽用吧,啥毛病沒(méi)有,沒(méi)有的話,是不是你svg名字給寫(xiě)錯(cuò)了。其他都沒(méi)錯(cuò)了還是不顯示就去檢查這個(gè)webpack的配置吧和控制臺(tái)的錯(cuò)誤輸出。其他就只有碰到了才清楚。
現(xiàn)在最新版給的方法是這個(gè)(先別急著用)
1.在對(duì)應(yīng)vue項(xiàng)目里添加插件
vue?add svg-sprite
2.再執(zhí)行:
npm?install?svgo svgo-loader?--save-dev
這里開(kāi)發(fā)以來(lái)會(huì)增加一個(gè)vue-cli-svg-sprite和svgo和svgo-loader
因?yàn)閟vgo可以整理svg的某些東西,去掉或者增加,反正是可以批量處理他們,以方便我們使用。他會(huì)給我們自動(dòng)生成一個(gè)已經(jīng)寫(xiě)好的組件? 到時(shí)候你引入這個(gè)組件就可以了。我的情況就是沒(méi)找到原因就是一直不顯示還不報(bào)錯(cuò)。so,我拋棄了他,使用了上邊的方法,實(shí)際上vue-cli-svg-sprite的依賴(lài)也是svg-sprite-loader,沒(méi)準(zhǔn)問(wèn)題也是file-loader的事,應(yīng)該是我的某些配置問(wèn)題。如果有大神知道原因,希望你告訴我一下吧。最近沒(méi)空去探尋真理,實(shí)現(xiàn)了先用。
總結(jié)
以上是生活随笔為你收集整理的vuecli3的svgicon_vue-cli3引入svg图标全过程以及遇到的坑的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: python用于pmc排产可以吗_生产计
- 下一篇: html5 长链接,Vue通过WebSo