SVG如何在vue项目中使用？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
创新互联于2013年创立，先为阿尔山等服务建站，阿尔山等地企业，进行企业商务咨询服务。为阿尔山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
配置
安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理，所以需要处理下：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}cnpm i -D svg-sprite-loader。在static下新建svg文件夹，用来放置当做icon使用的svg，使用include,include和img做区分。然后修改webpack.base.conf.js配置,这样svg-sprite-loader只会处理我们指定的static/svg下的文件：
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('static/svg')], // include => 只处理指定的文件夹下的文件
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('static/svg')], // exclude => 不处理指定的文件夹下的文件
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}3、使用
在components下创建svg文件夹，创建Svg.vue文件:
在utils文件夹下创建svgConfig文件夹，创建index.js文件，全局注册svg-icon组件。
Vue.component('svg-icon', SvgIcon)
使用require.context自动导入文件，而不需要import一个个去引用:
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./../../../static/svg/', true, /\.svg$/)
requireAll(req)
4. 在main.js在执行：
import '@/utils/svgConfig'
到此我们就可以直接在项目中使用：
4、优化
虽然现在已经可以使用svg-icon,当是还无法直观的分辨svg，当svg文件比较多的时候，如果只能一个个的去查找将费时费力。为方便我们查找和使用svg，可以新建一个svg的列表页。
在pages文件下新建SvgList.vue文件，iconsMap为导入的svg文件数组，handleClipboard方法为点击复制的方法，通过安装clipboard实现（cnpm i -S clipboard）：
{{generateIconCode(item)}}
