Vue开源：vue-svgicon - 一个生成 svg 图标组件的工具

   <h2>vue-svgicon</h2>    <p>A tool to create svg icon components. (vue 2.x)</p>    <h2>Inspiration</h2>    <p><a href="/misc/goto?guid=4959740309497843767" rel="nofollow,noindex">https://github.com/Justineo/vue-awesome</a></p>    <h2>demo</h2>    <p><a href="/misc/goto?guid=4959740309574820836" rel="nofollow,noindex">https://mmf-fe.github.io/vue-svgicon/</a></p>    <h2>Usage</h2>    <h3>Generate icon</h3>    <p>Install</p>    <pre>  <code class="language-javascript"># install global  npm install vue-svgicon -g  # install for project  npm install vue-svgicon --save-dev</code></pre>    <p>Command</p>    <pre>  <code class="language-javascript"># generate svg icon components  vsvg -s /path/to/svg/source -t /path/for/generated/components</code></pre>    <p>Use as npm scripts</p>    <pre>  <code class="language-javascript">{      "scripts": {          "svg": "vsvg -s ./static/svg/src -t ./src/icons"      }  }</code></pre>    <pre>  <code class="language-javascript"># bash  npm run svg</code></pre>    <h3>Use generated icon</h3>    <p>Use plugin</p>    <pre>  <code class="language-javascript">// main.js  import Vue from 'vue'  import App from './App.vue'  import svgicon from 'vue-svgicon'    // Default tag name is 'svgicon'  Vue.use(svgicon, {      tagName: 'svgicon'  })    new Vue({    el: '#app',    render: h => h(App)  })</code></pre>    <p>Use icon in component</p>    <pre>  <code class="language-javascript"><!-- App.vue -->  <template>    <div id="app">      <p>        <svgicon icon="vue" width="200" height="200" color="#42b983 #35495e"></svgicon>      </p>    </div>  </template>    <script>  import 'icons/vue'    export default {    name: 'app',    data () {      return {        msg: 'Welcome to Your Vue.js App',      }    }  }  </script></code></pre>    <p>You can import all icons at once</p>    <pre>  <code class="language-javascript">import 'icons'</code></pre>    <h2>Props</h2>    <h3>icon</h3>    <p>icon name</p>    <pre>  <code class="language-javascript"><svgicon icon="vue"></svgicon></code></pre>    <h3>dir</h3>    <p>The direction of icon. Default value is <strong>right</strong></p>    <pre>  <code class="language-javascript"><svgicon icon="arrow" width="50" height="50" dir="left"></svgicon>  <svgicon icon="arrow" width="50" height="50" dir="up"></svgicon>  <svgicon icon="arrow" width="50" height="50"></svgicon>  <svgicon icon="arrow" width="50" height="50" dir="down"></svgicon></code></pre>    <h3>fill</h3>    <p>Whether to fill the path/shape. Default value is <strong>true</strong></p>    <pre>  <code class="language-javascript"><svgicon icon="arrow" width="50" height="50"></svgicon>  <svgicon icon="arrow" width="50" height="50" :fill="false"></svgicon></code></pre>    <p>You can use <strong>r-color</strong> to reverse the fill property</p>    <pre>  <code class="language-javascript"><!-- the first one is fill(default), the second use stroke -->  <svgicon icon="clock" color="#8A99B2 r-#1C2330" width="100" height="100"></svgicon>  <!-- the first one is stoke, the second is fill -->  <svgicon icon="clock" color="#8A99B2 r-#1C2330" width="100" height="100" :fill="false"></svgicon></code></pre>    <h3>width / height</h3>    <p>Specify the size of icon. Default value is <strong>16px / 16px</strong> . Default unit is <strong>px</strong></p>    <pre>  <code class="language-javascript"><svgicon icon="arrow" width="50" height="50"></svgicon>  <svgicon icon="arrow" width="10em" height="10em"></svgicon></code></pre>    <h3>Color</h3>    <p>Specify the color of icon. Default value is <strong>inherit</strong> .</p>    <pre>  <code class="language-javascript"><p style="color: darkorange">      <svgicon icon="arrow" width="50" height="50"></svgicon>      <svgicon icon="arrow" width="50" height="50" color="red"></svgicon>      <svgicon icon="arrow" width="50" height="50" color="green"></svgicon>      <svgicon icon="arrow" width="50" height="50" color="blue"></svgicon>  </p></code></pre>    <p>If the icon is mutil path/shape, you can use mutil color. It is defined in the order of path/shape.</p>    <pre>  <code class="language-javascript"><svgicon icon="vue" width="100" height="100" color="#42b983 #35495e"></svgicon></code></pre>    <p>Also, you can use css to add colors.</p>    <pre>  <code class="language-javascript"><svgicon class="vue-icon" icon="vue" width="100" height="100"></svgicon></code></pre>    <pre>  <code class="language-javascript">.vue-icon path[pid="0"] {      fill: #42b983  }    .vue-icon path[pid="1"] {      fill: #35495e  }</code></pre>    <p>You can't use this feature in scoped block.</p>    <p>Use gradient</p>    <pre>  <code class="language-javascript"><template>      <svg>         <defs>            <linearGradient id="gradient-1" x1="0" y1="0" x2="0" y2="1">                <stop offset="5%"  stop-color="#57f0c2"/>                <stop offset="95%" stop-color="#147d58"/>            </linearGradient>            <linearGradient id="gradient-2" x1="0" y1="0" x2="0" y2="1">                <stop offset="5%"  stop-color="#7295c2"/>                <stop offset="95%" stop-color="#252e3d"/>            </linearGradient>        </defs>      </svg>      <svgicon icon="vue" width="15rem" height="15rem" color="url(#gradient-1) url(#gradient-2)"></svgicon>  </template></code></pre>    <p> </p>