【vue-svg-icon】 !xml-loader! install error

Question

按照官方的说法：

1.install

$ npm install vue-svg-icon --save-dev

我的package.json

2.put your svg into src/svg/
this dir are not supported to be configured now
src folder should be in the same folder with node_modules

这是我的工作目录:

3.import vue-svg-icon in your main.js

import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon);  

这是main.js

4.use the svg icon in your vue!
<icon name="chameleon" :scale="20"></icon>

模板：

OK 跑起来...

官方解释：

This dependency was not found:
   
   * !xml-loader!../../src/svg in ./~/.6.4.1@babel-loader/lib!./~/.11.1.4@vue-loader/lib/selector.js?type=script&index=0!./~/.1.2.8@vue-svg-icon/Icon.vue
   
   To install it, you can run: npm install --save !xml-loader!../../src/svg

接下来：

$ cnpm install !xml-loader!../../src/svg
-bash: !xml-loader!../../src/svg: event not found

......HOLY

有大神遇到这样的问题吗？怎么解决的？

Answer 1

在main.js中Vue.component('icon', Icon)下方添加这么一句试试：

Icon.inject('moreclass');

注意文件名字和src/svg目录下的文件名相同，扩展名可不写，使用时的name的名字也是这个moreclass

Answer 2

没有按照xml-loader啊
cnpm install xml-loader

Answer 3

不知道你的问题解决了没有？我在src文件夹下新建了svg文件夹就好了。就是和components、router并列的那一级(懒得打字写文件结构了。。。)

Answer 4

我之前在main.js中导入这个包，编译就报错，而且没有错误提示，刚才又神奇地正常了，步骤如下：
①在/src同级目录新建svg目录，里面放图标文件。

②在main.js中导入库：

import Icon from "vue-svg-icon/Icon.vue";
// 这一句好像要放在Vue.use和Vue.config.productionTip上面
Vue.component("icon", Icon);
Vue.use(ElementUI);
Vue.config.productionTip = false;

③然后在vue中正常使用就行了

<icon name="github"></icon>