vue-svgicon, 创建 svg icon 组件的工具 ( vue 2.x ) 使用内联 svg

分享于 

10分钟阅读

GitHub

  繁體 雙語
A tool that create Vue svg icon components
  • 源代码名称:vue-svgicon
  • 源代码网址:http://www.github.com/MMF-FE/vue-svgicon
  • vue-svgicon源代码文档
  • vue-svgicon源代码下载
  • Git URL:
    git://www.github.com/MMF-FE/vue-svgicon.git
    Git Clone代码到本地:
    git clone http://www.github.com/MMF-FE/vue-svgicon
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/MMF-FE/vue-svgicon
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    svgicon

    Build StatusCoverage Status

    创建 svg icon 组件的工具。 ( vue 2.x ) 中文

    的灵感

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

    演示

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

    一些问题

    用法

    生成 icon

    安装
    # install globalnpm install vue-svgicon -g# install for projectnpm install vue-svgicon --save-dev
    命令
    # generate svg icon componentsvsvg -s/path/to/svg/source -t/path/for/generated/components
    用作npm脚本
    {
     "scripts": {
     "svg": "vsvg -s./static/svg/src -t./src/icons" }
    }
    # bashnpm run svg

    它将生成指定路径的图标。

    自定义 icon-内容格式
    # specify template pathvsvg -s/path/to/svg/source -t/path/for/generated/components --tpl/path/for/icon-template

    默认模板为:

    var icon =require('vue-svgicon')icon.register({
     '${name}': {
     width: ${width},
     height: ${height},
     viewBox: ${viewBox},
     data:`${data}` }
    })
    自定义 icon-文件扩展名
    vsvg -s/path/to/svg/source -t/path/for/generated/components --ext ts

    Suport ES6模块

    vsvg -s/path/to/svg/source -t/path/for/generated/components --ext ts --es6

    使用生成的icon

    首先,你应该在全局范围内为 vue-svgicon 编写一些css代码。 推荐的代码如下:

    /* recommended css code for vue-svgicon */.svg-icon {
     display: inline-block;
     width: 16px;
     height: 16px;
     color: inherit;
     vertical-align: middle;
     fill: none;
     stroke: currentColor;
    }.svg-fill {
     fill: currentColor;
     stroke: none;
    }.svg-up {
     /* default */transform: rotate(0deg);
    }.svg-right {
     transform: rotate(90deg);
    }.svg-down {
     transform: rotate(180deg);
    }.svg-left {
     transform: rotate(-90deg);
    }

    你可以使用 classPrefix 选项来设置默认类 NAME。 默认前缀为 svg

    使用插件

    // main.jsimportVuefrom'vue'importAppfrom'./App.vue'import*assvgiconfrom'vue-svgicon'// Default tag name is 'svgicon'Vue.use(svgicon, {
     tagName:'svgicon'})newVue({
     el:'#app',
     render:h=>h(App)
    })

    在组件中使用 icon

    <!-- App.vue --><template>
     <divid="app">
     <p>
     <svgiconname="vue"width="200"height="200"color="#42b983 #35495e"></svgicon>
     </p>
     </div>
    </template>
    <script>import'icons/vue'exportdefault { name:'app',data () {return { msg:'Welcome to Your Vue.js App', } }}</script>

    你可以一次导入所有图标

    import'icons'

    命令行选项

    标记

    自定义组件标记 NAME。默认值为 svgicon

    Vue.use(svgicon, {
     tagName:'svgicon'})
    <svgiconname="vue"></svgicon>

    classPrefix

    你可以使用 classPrefix 选项来设置默认类 NAME。 默认前缀为 svg

    Vue.use(svgicon, {
     classPrefix:'vue-svg'})

    它将像这样生成:

    <svgversion="1.1"viewBox="0 0 4 7"class="vue-svg-icon vue-svg-fill vue-svg-up"><!-- svg code --></svg>

    defaultWidth/defaultHeight

    设置大小为props时设置默认大小。

    Vue.use(svgicon, {
     defaultWidth:'1em',
     defaultHeight:'1em'})

    道具

    icon/名称

    icon 名称。

    <svgiconicon="vue"></svgicon>
    <svgiconname="vue"></svgicon>

    目录

    icon的direction。

    <svgiconname="arrow"width="50"height="50"dir="left"></svgicon>
    <svgiconname="arrow"width="50"height="50"dir="up"></svgicon>
    <svgiconname="arrow"width="50"height="50"dir="right"></svgicon>
    <svgiconname="arrow"width="50"height="50"dir="down"></svgicon>

    填充

    是否填充路径/形状。 默认值为 true

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

    你可以使用 r 颜色来反转填充属性

    <!-- the first one is fill(default), the second use stroke --><svgiconname="clock"color="#8A99B2 r-#1C2330"width="100"height="100"></svgicon><!-- the first one is stoke, the second is fill --><svgiconname="clock"color="#8A99B2 r-#1C2330"width="100"height="100" :fill="false"></svgicon>

    宽度/高度

    指定 icon的大小。 默认值为 16px/16px。 默认单位为 px

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

    比例

    缩放 icon 大小,它将覆盖宽度/高度

    <svgiconname="arrow"scale="10"></svgicon>
    <svgiconname="arrow"scale="10"width="10em"height="10em"></svgicon>

    颜色

    指定 icon的颜色。 默认值为继承

    <pstyle="color: darkorange">
     <svgiconname="arrow"width="50"height="50"></svgicon>
     <svgiconname="arrow"width="50"height="50"color="red"></svgicon>
     <svgiconname="arrow"width="50"height="50"color="green"></svgicon>
     <svgiconname="arrow"width="50"height="50"color="blue"></svgicon>
    </p>

    如果 icon 是多重路径/形状,则可以使用多种颜色。 它是按照路径/形状的顺序定义的。

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

    此外,你还可以使用CSS添加颜色。

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

    使用渐变

    <template>
     <svg>
     <defs>
     <linearGradientid="gradient-1"x1="0"y1="0"x2="0"y2="1">
     <stopoffset="5%"stop-color="#57f0c2"/>
     <stopoffset="95%"stop-color="#147d58"/>
     </linearGradient>
     <linearGradientid="gradient-2"x1="0"y1="0"x2="0"y2="1">
     <stopoffset="5%"stop-color="#7295c2"/>
     <stopoffset="95%"stop-color="#252e3d"/>
     </linearGradient>
     </defs>
     </svg>
     <svgiconname="vue"width="15rem"height="15rem"color="url(#gradient-1) url(#gradient-2)"></svgicon>
    </template>

    原始

    使用初始色

    <iconname="colorwheel"width="100"height="100" :original="true"></icon><!-- overwrite original color --><iconname="colorwheel"width="100"height="100" :original="true"color="_ black _ black _"></icon>

    多个目录( 命名空间)

    你可以使用多个目录来区分具有相同名称的图标。

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

    在 IE 和旧浏览器上的工作

    这里组件无法在 IE 上工作,因为 IE 不支持SVGElement中的innerHTML。 你可以使用 innersvg-polyfill 使它的工作。 你还可以使用这里组件提供的polyfill。

    // in main.js first lineimport'vue-svgicon/dist/polyfill'

    这里polyfill是 innersvg-polyfill的包装器。


    COM  tool  component  组件  ICO  icon  
    相关文章