vuecli3的svgicon_vue-cli项⽬中使⽤svg图标
1.在src/icons/svg存放icon⽮量图(可以去iconfont查合适的icon，选择svg下载)
svg图2.在src/icons/index.js中使⽤webpack的t⾃动引⼊src/icons下⾯所有的图标。
const req = t('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
3.在fig.js中配置svg-sprite-loader
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]' // name代表图标的名字
}
}
注意：由于vue-cli默认情况下会使⽤ url-loader 对svg进⾏处理(如下代码)，会将它放在/img ⽬录下，所以这时候我们引⼊svg-sprite-loader 会引发⼀些冲突。我们可以使⽤exclude: [resolve('src/icons')]，让url-loader只处理除此⽂件夹之外的svg。
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')], // 使⽤exclude排除src/icons，让url-loader只处理除此⽂件夹之外的svg
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
4.使⽤图标(假定此时src/icons中有⼀个delete.svg的图标)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。