vue 不识别svg_vue项目中使用Svg的方法

github demo: github地址

闲聊背景

本文主要以 vue-cli3 搭建的项目为例，来聊一下如何在项目中更优雅的使用 svg 。

众所周知， vue-cli3 已经推出很长一段时间了，大家可以感受一下 vue-cli3 带来的零配置体验。But，也相应带来了一些弊端，就是如归需要修改默认的 loader 时，会比较麻烦。

们接下来主要使用的就是上文中提到的 svg 的 use ，先上一张 vue-cli3 搭建的项目的目录，可以看到根目录下只保留了 public/ 以及 src/ ，可以说非常干净，大家可以自己创建一个。

在 src/components/ 下创建 SvgIcon 组件

export default {

name: 'SvgIcon',

props: {

iconClass: {

type: String,

required: true,

},

className: {

type: String,

default: '',

},

},

computed: {

iconName () {

return `#icon-${this.iconClass}`

},

svgClass () {

if (this.className) {

return