无报错但是不能显示图标

[SoraYama]

• 版本：1.2.9
• 现象：使用组件后不能正确绘制图标
• 代码：

// in main
import Icon from 'vue-svg-icon/Icon.vue'
Vue.component('si', Icon)

// in component
<template>
   <si name="close" scale="20" />
</template>

• 说明：已知文件位置等没有问题，控制台无报错，在源码处调试发现 icon.paths 是空数组，推测可能是 parse.js 中相关功能没有正确使用。另外附上 svg 代码

<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="30px" viewBox="0 0 32 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>收起</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="首页-3.20" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1268.000000, -200.000000)">
        <g id="范围筛选" transform="translate(1247.000000, 181.000000)" fill="#4A4A4A">
            <g id="操作按钮">
                <g id="收起" transform="translate(3.000000, 0.000000)">
                    <path d="M49.7695427,33.417 C49.8872763,33.5645 49.9694394,33.735 49.9844692,33.9355 C49.9849702,33.9535 49.996994,33.967 49.996493,33.9855 C49.996994,33.991 50,33.9945 50,33.9995 C50,34.0045 49.996994,34.0095 49.996994,34.0145 C49.996994,34.027 49.9904811,34.037 49.9899801,34.05 C49.9774553,34.2885 49.8837694,34.5015 49.7339721,34.667 C49.7219482,34.6805 49.7274592,34.7 49.7144333,34.714 C49.7019085,34.726 49.6823697,34.721 49.6688429,34.7325 C49.658823,34.7415 49.6417892,34.74 49.6317693,34.748 L41.6664631,42.7145 C41.2847056,43.0945 40.6664788,43.0945 40.2852222,42.7145 C39.9034647,42.3325 39.9034647,41.714 40.2852222,41.333 L46.6187904,35 L22.9994207,35 C22.4463232,35 21.9989354,34.552 21.9989354,33.999 C21.9989354,33.447 22.4468242,32.999 22.9994207,32.999 L46.6192914,32.999 L40.2847212,26.6655 C39.9029637,26.2845 39.9029637,25.6665 40.2847212,25.284 C40.6659778,24.903 41.2842046,24.903 41.6659621,25.284 L49.6052166,33.223 C49.6142345,33.2305 49.6177415,33.2415 49.6262584,33.2485 C49.652811,33.2695 49.6898846,33.2605 49.7144333,33.285 C49.7510059,33.322 49.739984,33.377 49.7695427,33.417 L49.7695427,33.417 Z M33.9997495,22 C33.9997495,21.447 34.5523461,20.9995 33.9997495,20.9995 L20.999953,20.9995 C20.4468555,20.9995 19.9994677,21.447 19.9994677,22 L19.9994677,45.9995 C19.9994677,46.5515 20.4473565,46.9995 20.999953,46.9995 L32.9997652,46.9995 C33.5523617,46.9995 33.9997495,46.5515 33.9997495,45.9995 L33.9997495,42.9985 L36.0002192,42.9985 L36.0002192,46.9995 C36.0002192,48.105 35.1044416,49 33.9997495,49 L19.9994677,49 C18.8947756,49 18,48.105 18,46.9995 L18,20.9995 C18,19.8945 18.8947756,19 19.9994677,19 L33.9997495,19 C35.1044416,19 36.0002192,19.8945 36.0002192,20.9995 L36.0002192,24.999 L33.9997495,24.999 L33.9997495,22 L33.9997495,22 Z"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

[sherily123]

I have the same problem like this too. icon.paths is an empty array, and my version is 1.2.9 too.

[sherily123]

@SoraYama Perhaps it's because parse.js cannot retrieve paths that nested in multiple tags. I moved out as a direct child node of

[vinciarts]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="17px" height="32px" viewBox="0 0 17 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="facebook" fill="#000000" fill-rule="nonzero">
            <path d="M11.8921644,6.0778082 L16.0065753,6.0778082 L16.0065753,0 L11.1699726,0 L11.1699726,0.02191781 C5.309589,0.22947945 4.1084932,3.523726 4.0026301,6.9836712 L3.9905753,6.9836712 L3.9905753,10.0186301 L0,10.0186301 L0,15.9706301 L3.9905753,15.9706301 L3.9905753,31.9252603 L10.0046027,31.9252603 L10.0046027,15.9706301 L14.9310685,15.9706301 L15.8827397,10.0186301 L10.0065753,10.0186301 L10.0065753,8.1849863 C10.0065753,7.0156712 10.7846575,6.0778082 11.8921644,6.0778082 Z" id="shape"></path>
        </g>
    </g>
</svg>

我也不行…

[MuBeiSAMA]

#30 可以参考这个问题

[huyoooooooo]

I also encountered the same problem, the component registered in the global does not display the icon, so I introduced the local component in the specific vue file, it works, can display the icon but can not change the color through the style