美文网首页
SVG格式的Icon,用了你就知道有多香

SVG格式的Icon,用了你就知道有多香

作者: 编程范儿 | 来源:发表于2021-01-06 10:47 被阅读0次

    继阿里的iconfont之后,字节跳动也出品了自己的矢量图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景。

    图片

    矢量SVG图标的出现,完全改变了前端的开发方式,之前总是通过设计切图,然后合并成雪碧图(sprite),通过CSS引入背景定位的方式,不仅要写一堆的css代码,而且拓展灵活性不强,如果要改变图标的颜色和大小,又得重新做图,重复以上的步骤。

    有了svg就方便多了,轻松地通过font-size和color来改变大小和颜色,一处引用,处处可用。并且是高质量的图,免去了使用2x和3x图的烦恼。

    使用方式:

    // 引用
    import {CheckOne} from '@icon-park/vue'
    // 调用
    <check-one theme="filled" size="32" fill="#17bd08"/>
    
    • 参考配置
    图片
    • 多种图标类型只需改变theme属性
    图片

    对开发者友好,还针对不同的技术栈提供了不同的代码库,满足React/Vue/SVG/m移动端/小程序等多种开发场景使用:

    GitHubhttps://github.com/bytedance/IconPark

    下载React包:NPM地址 https://www.npmjs.com/package/@icon-park/react

    下载Vue包:NPM地址 https://www.npmjs.com/package/@icon-park/vue

    下载Vue3包:NPM地址 https://www.npmjs.com/package/@icon-park/vue-next

    下载SVG包:NPM地址 https://www.npmjs.com/package/@icon-park/svg

    相关文章

      网友评论

          本文标题:SVG格式的Icon,用了你就知道有多香

          本文链接:https://www.haomeiwen.com/subject/gnpioktx.html