在vue中使用svg小图标

1.首先安装

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

2. 在webpack.base.conf.js中手动添加

module: {
{
test: /.svg/,
loader: ‘url-loader‘,
exclude: [resolve(‘src/icons‘)],
options: {
limit: 10000,
name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
}
},
}

3. 在src/components下新增一个文件夹 SvgIcon/index.vue,代码如下:

4. 在src下新增文件夹icons/svg存放svg图
   icons/index.js代码如下:

import Vue from ‘vue‘
import SvgIcon from ‘@/components/SvgIcon‘// svg组件

// register globally
Vue.component(‘svg-icon‘, SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context(‘./svg‘, false, /.svg$/)
requireAll(req)

5. 在main.js中引入:

import ‘@/icons‘ // icon

6. 重新

npm run dev

7. vue的文件中就可以用啦!! 界面使用 如:

//userName是svg图的命名