安裝擴(kuò)展組件：
npm install laravel-mix-svg-vue
or
yarn add laravel-mix-svg-vue
在 webpack.mix.js 中添加引用：
const mix = require('laravel-mix');
require('laravel-mix-svg-vue');
mix.js('resources/js/app.js', 'public/js')
.svgVue();
在 app.js 中引用組件
import Vue from 'vue';
import SvgVue from 'svg-vue';
Vue.use(SvgVue);
svg 使用：
<svg-vue icon="avatar"></svg-vue>
默認(rèn)配置
{
svgPath: 'resources/svg',
extract: false,
svgoSettings: [
{ removeTitle: true },
{ removeViewBox: false },
{ removeDimensions: true }
]
}
| 參數(shù) | 類(lèi)型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| svgPath | String | resources/svg | svg 圖標(biāo)路徑 |
| extract | Boolean | false | 將 svg 與主包分離 |
| svgoSettings | Array | [{ removeTitle: true }, { removeViewBox: false }, { removeDimensions: true }] | svgo 相關(guān)設(shè)置 |
ps
移除svg自帶顏色，可以在配置下加一行：
{removeAttrs: { attrs: '(fill|stroke)' }}
缺點(diǎn)
好像是不能通過(guò)參數(shù)動(dòng)態(tài)改變 svg 內(nèi)容，沒(méi)試出來(lái)，不知道什么原因。
