Nondeterministic Programming Methodology

    This package has been deprecated

    Author message:

    TS features have been added to original package vue-svgicon. Please use that now.

    vue-svgicon-ts
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.7 • Public • Published

    vue-svgicon

    Build Status Coverage Status

    A tool to create svg icon components. (vue 2.x)

    This is a fork of https://github.com/MMF-FE/vue-svgicon with TypeScript support. Created this package temporarily till the PR on the original is accepted and merged.

    Currently at https://www.npmjs.com/package/vue-svgicon-ts

    Inspiration

    https://github.com/Justineo/vue-awesome

    demo

    https://mmf-fe.github.io/vue-svgicon/

    Usage

    Generate icon

    Install

    # install global 
    npm install vue-svgicon -g
    # install for project 
    npm install vue-svgicon --save-dev

    Command

    # generate svg icon components 
    vsvg -s /path/to/svg/source -t /path/for/generated/components

    Use as npm scripts

    {
        "scripts": {
            "svg": "vsvg -s ./static/svg/src -t ./src/icons"
        }
    }
    # bash 
    npm run svg

    It will generate icons to the specified path.

    Custom icon content format

    # specify template path 
    vsvg -s /path/to/svg/source -t /path/for/generated/components --tpl /path/for/icon-template

    Default template is:

    var icon = require('vue-svgicon')
    icon.register({
      '${name}': {
        width: ${width},
        height: ${height},
        viewBox: ${viewBox},
        data: '${data}'
      }
    })
     

    TypeScript Support

    # Add the typescript flag '--ts' 
    vsvg -s /path/to/svg/source -t /path/for/generated/components --ts

    This will cause the icon files generated as well as the index file to be TypeScript files for use in those projects.

    Colored Icons

    In the cases were you have an SVG Logo which already has color and strokes, then to be able to retain that information in the bundled SVG, just be sure to end the filename with -color;

    Example: company-logo-color.svg

    This file will retain the fills and stroke from the SVG file.

    Use generated icon

    Use plugin

    // 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)
    })

    Use icon in component

    <!-- 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> 

    You can import all icons at once

    import 'icons'

    Props

    icon

    icon name

    <svgicon icon="vue"></svgicon>

    dir

    The direction of icon. Default value is right

    <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>

    fill

    Whether to fill the path/shape. Default value is true

    <svgicon icon="arrow" width="50" height="50"></svgicon>
    <svgicon icon="arrow" width="50" height="50" :fill="false"></svgicon>

    You can use r-color to reverse the fill property

    <!-- 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>

    width / height

    Specify the size of icon. Default value is 16px / 16px. Default unit is px

    <svgicon icon="arrow" width="50" height="50"></svgicon>
    <svgicon icon="arrow" width="10em" height="10em"></svgicon>

    Color

    Specify the color of icon. Default value is inherit.

    <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>

    If the icon is mutil path/shape, you can use mutil color. It is defined in the order of path/shape.

    <svgicon icon="vue" width="100" height="100" color="#42b983 #35495e"></svgicon>

    Also, you can use CSS to add colors.

    <svgicon class="vue-icon" icon="vue" width="100" height="100"></svgicon>
    .vue-icon path[pid="0"] {
        fill: #42b983
    }
     
    .vue-icon path[pid="1"] {
        fill: #35495e
    }

    You can't use this feature in scoped block.

    Use gradient

    <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>

    Multiple directory (Namespace)

    You can use multiple directory to discriminate the icons which has the same name.

    ├── arrow.svg
    ├── sora
    │   ├── arrow.svg
    │   └── fit
    │       └── arrow.svg
    
    
    <svgicon icon="arrow" width="50" height="50"></svgicon>
    <svgicon icon="sora/arrow" width="50" height="50"></svgicon>
    <svgicon icon="sora/fit/arrow" width="50" height="50"></svgicon>
     

    Work on server-side render (SSR)

    The component will insert the CSS style to the document object, so it will throw an error in SSR. The solution is to define an alias for vue-svgicon module if you use webpack.

    var config = {
        module: {
            resolve: {
                alias: {
                    'vue-svgicon$': 'vue-svgicon/component/svgicon.vue'
                }
            }
        }
    }

    If you are using other build systems..., I think you can find a similar solution to how webpack does it.

    Work on IE

    This component doesn't work on IE because IE don't support innerHTML in SVGElement. You can use this polyfill to make it work. https://github.com/dnozay/innersvg-polyfill

    Install

    npm i vue-svgicon-ts

    DownloadsWeekly Downloads

    30

    Version

    1.2.7

    License

    MIT

    Last publish

    Collaborators

    • chrisajames