• React Native 使用 SVG 作为图标 

    在方糖全栈课里边我们讲了如何通过 react-native-vector-icons 来引入字体图标,但是并没有讲到如何使用自己创造的 SVG 图案。

    一 创造 SVG 图案

    使用 Sketch 、 AI 和 AD 等矢量绘图软件都可以创造自己想要的矢量图案,并导出为 SVG 格式。

    Screen Shot 2018-05-28 at 12.20.27 PM.png

    以 Sketch 为例,选中想要输出为 SVG 格式的图像层,然后 在右下角 make exportable 后,选中 svg 格式即可。

    二 导入 IcoMoon 生成字体

    虽然 React Native 是支持 SVG 显示的,但我们可以通过把一类矢量图形做成一个字体方式来更好的管理。

    访问 IcoMoon ,点击 import Icons 把刚才到处的 SVG 导入进去。

    Screen Shot 2018-05-28 at 12.23.11 PM.png

    然后点右下角的 Generate Font 。将生成的字体 Zip 文件下载下来。

    三 导入 React Native

    将 Zip 解压后,放到项目下根下,改名为 fonts 吧。

    然后

    import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
    import icoMoonConfig from '../fonts/selection.json';
    const Icon = createIconSetFromIcoMoon(icoMoonConfig);

    这样我们的图案就被载入了。需要使用的时候和字体一样:

    <Icon name="logo" size={100}/>


    之后只要不停的去更新 fonts 下 IcoMoon 生成的字体文件就能不断添加图标了。这样的好处是所有的图标都在字体里边。开发和设计流程中只要分享下字体,图标就全了。


    PS:  zip 包中的 ttf 字体文件需要复制一份到 android/app/src/main/assets/fonts 。这个目录可能不存在,build 一次后会出来。🍩

微博一键登入