- 最近在跟着一个网上的项目进行学习,遇到的第一个问题就是vue中使用svg图标。基于vue的组件化思想,项目中进行了开发了一个SvgIcon组件。在此,我们要先安装好"svg-sprite-loader"(这个之后要去学习一下这个库),反正装了这个loader能自动的为我们在#showroot生成一系列东西。
- 接下来遇到的问题是属于webpack中的配置问题,我曾天真的以为会智能的在webpack.base.conf.js中自动生成这一系列的配置,这些都是要靠自己配的!正是因为这个想法,我才被困扰于为啥svg图标还未出现
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
// 除了这个目录下,都要去查找
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
只要配好这些就可以了