console 命令行工具 X clear

console

const SvgIcon = Vue.component('SvgIcon', {
    // 你的代码
    props: ['icon', 'className'],
    template: `
        <div>
            <svg :class="className">
                <use :href="svgId"/>
            </svg>
        </div>
    `,
    computed: {
        svgId(){
            return `#icon-${this.icon}`
        }
    }
 
})

const app = new Vue({
    el: '#app',
    components: { SvgIcon },
    template:
        `
        <div>
            jubao:<svg-icon icon="jubao" class-name="blue" />
            <br />
            zaixianzixun:<svg-icon icon="zaixianzixun" class-name="red" />
        </div>
    `,
     
})

<div id="app"></div>

<svg>
<symbol id="icon-jubao" viewBox="0 0 1024 1024">
    <path d="M0 0h1024v1024H0z" fill-opacity="0" ></path>
    <path d="M714.666667 100.885333l137.6 25.024A79.274667 79.274667 0 0 1 917.333333 203.904v487.978667a79.274667 79.274667 0 0 1-38.293333 67.861333L573.44 944.234667a118.890667 118.890667 0 0 1-122.922667 0L144.96 759.744A79.274667 79.274667 0 0 1 106.666667 691.904V203.882667a79.274667 79.274667 0 0 1 65.066666-77.994667L309.333333 100.906667a1132.117333 1132.117333 0 0 1 405.333334 0z m-11.456 62.954667a1068.117333 1068.117333 0 0 0-382.421334 0l-137.6 25.045333A15.274667 15.274667 0 0 0 170.666667 203.904v487.978667c0 5.333333 2.794667 10.304 7.381333 13.077333l305.578667 184.490667a54.890667 54.890667 0 0 0 56.746666 0l305.578667-184.490667a15.274667 15.274667 0 0 0 7.381333-13.077333V203.904a15.274667 15.274667 0 0 0-12.522666-15.018667l-137.6-25.045333z"></path>
    <path d="M512 277.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v225.856a42.666667 42.666667 0 1 1-85.333334 0V320a42.666667 42.666667 0 0 1 42.666667-42.666667zM512 640a42.666667 42.666667 0 0 1 42.666667 42.666667v21.333333a42.666667 42.666667 0 1 1-85.333334 0v-21.333333a42.666667 42.666667 0 0 1 42.666667-42.666667z"></path>
</symbol>
<symbol id="icon-zaixianzixun" viewBox="0 0 1024 1024">
    <path d="M0 0h1024v1024H0z" fill-opacity="0" ></path>
    <path d="M538.304 525.781333c-25.898667 0-46.869333-20.394667-46.869333-45.568v-60.757333c0-25.173333 20.970667-45.546667 46.869333-45.546667 25.877333 0 46.890667 20.373333 46.890667 45.546667v60.757333c0 25.173333-21.013333 45.568-46.890667 45.568z m186.581333 0c-25.877333 0-46.890667-20.394667-46.890666-45.568v-60.757333c0-25.173333 21.013333-45.546667 46.890666-45.546667s46.890667 20.373333 46.890667 45.546667v60.757333c0 25.173333-21.013333 45.568-46.890667 45.568z m-202.197333-437.12c-79.274667 0-155.797333 20.608-223.189333 59.541334C261.845333 108.096 207.232 85.333333 145.002667 85.333333c-11.370667 0-21.824 6.037333-27.306667 15.701334a29.76 29.76 0 0 0 0.853333 30.890666c0.362667 0.490667 32.768 51.541333 40.917334 129.898667 1.642667 15.637333 15.232 27.306667 31.082666 27.306667 1.066667 0 2.090667-0.042667 3.2-0.170667 17.152-1.706667 29.674667-16.576 27.946667-33.28-4.266667-40.789333-14.08-75.264-23.936-101.354667 23.914667 7.765333 49.792 22.613333 68.522667 50.688 0.085333 0.149333 0.256 0.213333 0.341333 0.362667 0.085333 0.128 0.085333 0.234667 0.149333 0.362667 1.130667 1.578667 2.730667 2.517333 4.053334 3.84 1.514667 1.450667 2.794667 3.157333 4.544 4.245333 1.792 1.130667 3.818667 1.6 5.76 2.346667 1.770667 0.682667 3.413333 1.664 5.248 2.026666 2.026667 0.384 4.053333 0.128 6.101333 0.128 1.962667 0 3.904 0.298667 5.866667-0.064 1.941333-0.362667 3.669333-1.365333 5.504-2.112 1.92-0.725333 3.882667-1.066667 5.653333-2.133333 0.128-0.106667 0.192-0.256 0.341333-0.341333l0.426667-0.149334A380.352 380.352 0 0 1 522.666667 149.418667c206.656 0 374.805333 163.413333 374.805333 364.266666 0 200.874667-168.149333 364.266667-374.826667 364.266667-206.656 0-374.826667-163.413333-374.826666-364.266667 0-51.413333 10.794667-101.12 32.106666-147.712 6.997333-15.317333-0.085333-33.28-15.872-40.106666-15.765333-6.805333-34.24 0.106667-41.258666 15.445333A412.010667 412.010667 0 0 0 85.333333 513.664C85.333333 748.010667 281.536 938.666667 522.666667 938.666667 763.861333 938.666667 960 748.010667 960 513.664c0-234.346667-196.16-424.981333-437.333333-424.981333z"></path>
</symbol>
<symbol id="icon-anquanbaozhang" viewBox="0 0 1024 1024">
    <path d="M0 0h1024v1024H0z" fill-opacity="0" ></path>
    <path d="M714.666667 100.885333l137.6 25.024A79.274667 79.274667 0 0 1 917.333333 203.904v487.978667a79.274667 79.274667 0 0 1-38.293333 67.861333L573.44 944.234667a118.890667 118.890667 0 0 1-122.922667 0L144.96 759.744A79.274667 79.274667 0 0 1 106.666667 691.904V203.882667a79.274667 79.274667 0 0 1 65.066666-77.994667L309.333333 100.906667a1132.117333 1132.117333 0 0 1 405.333334 0z m-11.456 62.954667a1068.117333 1068.117333 0 0 0-382.421334 0l-137.6 25.045333A15.274667 15.274667 0 0 0 170.666667 203.904v487.978667c0 5.333333 2.794667 10.304 7.381333 13.077333l305.578667 184.490667a54.890667 54.890667 0 0 0 56.746666 0l305.578667-184.490667a15.274667 15.274667 0 0 0 7.381333-13.077333V203.904a15.274667 15.274667 0 0 0-12.522666-15.018667l-137.6-25.045333z"></path>
    <path d="M707.050667 353.194667a32 32 0 0 1 43.029333 47.36l-207.893333 188.928a122.069333 122.069333 0 0 1-167.210667-2.837334l-87.957333-85.525333a32 32 0 0 1 44.629333-45.866667l87.957333 85.504a58.069333 58.069333 0 0 0 79.530667 1.344l207.914667-188.906666z"></path>
</symbol>
</svg>

 .blue{
     fill: blue;
 }
 .blue:hover{
     stroke-dashoffset: 0;
    animation: move 3s infinite  linear;
 }

@keyframes move {
  0%{
    stroke-dasharray: 0, 600px;
    opacity: 1;
    stroke-width: 3px
  }
  100%{
    stroke-dasharray: 600px, 0px;
    opacity: 0;
  }
}

本项目引用的自定义外部资源

vue.min.js