iconfont硬核,不依赖字体,支持多色彩,支持热更新



  • .
    .
    链接地址:https://github.com/fwh1990/react-native-iconfont-cli
    .
    .
    在RN里用过iconfont的小伙伴都知道,它本质上是字体图标,所以你得借助react-native-vector-icons等插件去处理字体。用字体有两个弊端:一是图标只能是单色,不具备多色彩的特性;二是因为字体要设置在android和ios源码中,所以不具备JS热更新的特性,每次修改字体都要重新打包。

    有些小伙伴想着把图标一个一个下载到本地,然后通过react-native-svg-uri渲染。这样做的话,意味着你需要花额外的时间去维护这些本地字体,每次线上图标变更,都要想要地更改本地图标。而且单独使用svg图标的话,是没办法动态去更改颜色的呢。
    .
    .
    .
    所以,带着这些问题,笔者开发了一个可以不通过字体、不需要一个一个下载、支持热更新、支持多色彩的iconfont库。√√√√√√√√√√

    0_1567154202782_icons.png

    特性:
    1、纯组件
    2、不依赖字体文件,支持JS热更新 ( code-push等 )
    3、自动化生成图标组件,带ts类型提示
    4、支持es6和typescript两种模式
    5、原样渲染多色彩图标
    6、图标颜色可定制

    使用案例:

    <Icon name="alipay" size={300} />
    

    0_1566923434210_f7a9fa9c-443e-4164-90ad-b1ba0144c123-image.png


    <Icon name="alipay" color="green" size={300} />
    

    0_1566923770094_639a634f-6ae8-44fe-92d7-1311940aa0ee-image.png


    <Icon name="alipay" color={['green', 'orange']} size={300} />
    

    0_1566923386006_7406a4f6-c899-4aba-b248-23bccc0f6efc-image.png


    喜欢这个插件的小伙伴记得给个star呦
    链接地址:https://github.com/fwh1990/react-native-iconfont-cli



  • 看着不错,先赞后用