如何在react-native中使用阿里iconfont矢量图标

最新推荐文章于 2024-08-21 10:04:37 发布

_zlfan

最新推荐文章于 2024-08-21 10:04:37 发布

阅读量1.3k

点赞数 1

分类专栏：前端之路文章标签： reactnative-svg svg iconfont

本文链接：https://blog.csdn.net/void_fan/article/details/112860271

版权

前端之路专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在 React Native 项目中引入和使用 SVG 图标，包括从 Iconfont 下载 SVG 格式的图标，解析 SVG 文件的关键属性如 `d` 和 `fill`，并将其转化为 React Native 可识别的组件代码。通过这种方式，可以在项目中灵活地展示各种图标，并调整颜色和大小。

摘要由CSDN通过智能技术生成

首先引入所需第三方库

npm install --save react-native-svg
# or yarn add react-native-svg

svg官网快速入门，主要学习常用的属性，如d，fill等等
d：绘制SVG图形的路径
fill：填充颜色

在iconfont选择需要的图标下载

iconfont官网
1.选好图标加入购物车，点击下载素材，根据需要调整颜色大小，下载svg格式素材
在这里插入图片描述
2.下载后得到一个压缩包，解压后如下

3.随便找一个文本编辑器打开这四个文件，我这里使用vscode打开，主要是可以格式化。现在我们主要关注svg标签和path标签，以第一个图标时间为例，首先拿到svg标签的width，height，viewBox三个属性，以及path标签的d属性
在这里插入图片描述

编写关键代码

将上一步得到的几个属性复制过来，注意react-native中是没有单位的，记得去掉px

import Svg,{ Path } from 'react-native-svg';
renderSVG = (code) => {
    const iconFont = [
      {
        code: 'highBrighteness',
        d: 'M512 805.888C350.72 805.888 218.112 673.28 218.112 512S350.72 218.112 512 218.112 805.888 350.72 805.888 512 673.28 805.888 512 805.888z m0-521.472c-126.464 0-230.656 104.192-230.656 230.656s104.192 230.656 230.656 230.656 230.656-104.192 230.656-230.656-104.192-230.656-230.656-230.656zM512 265.472c-18.944 0-31.488-12.544-31.488-31.488V123.136c0-18.944 12.544-31.488 31.488-31.488s31.488 12.544 31.488 31.488v110.592c0 18.944-12.544 31.744-31.488 31.744z m-196.096 82.176c-9.472 0-15.872-3.072-22.016-9.472l-79.104-79.104c-12.544-12.544-12.544-31.488 0-44.288 12.544-12.544 31.488-12.544 44.288 0l79.104 79.104c12.544 12.544 12.544 31.488 0 44.288-6.4 6.4-15.872 9.472-22.272 9.472z m-82.176 195.84H123.136c-18.944 0-31.488-12.544-31.488-31.488s12.544-31.488 31.488-31.488h110.592c18.944 0 31.488 12.544 31.488 31.488s-15.616 31.488-31.488 31.488z m3.328 275.2c-9.472 0-15.872-3.072-22.016-9.472-12.544-12.544-12.544-31.488 0-44.288l79.104-79.104c12.544-12.544 31.488-12.544 44.288 0 12.544 12.544 12.544 31.488 0 44.288l-79.104 79.104c-6.656 6.144-12.8 9.472-22.272 9.472zM512 932.352c-18.944 0-31.488-12.544-31.488-31.488v-110.592c0-18.944 12.544-31.488 31.488-31.488s31.488 12.544 31.488 31.488v110.592c0 18.944-12.544 31.488-31.488 31.488z m274.944-113.664c-9.472 0-15.872-3.072-22.016-9.472l-79.104-79.104c-12.544-12.544-12.544-31.488 0-44.288 12.544-12.544 31.488-12.544 44.288 0l79.104 79.104c12.544 12.544 12.544 31.488 0 44.288-6.4 6.144-12.8 9.472-22.272 9.472z m113.92-275.2h-110.592c-18.944 0-31.488-12.544-31.488-31.488s12.544-31.488 31.488-31.488h110.592c18.944 0 31.488 12.544 31.488 31.488s-12.544 31.488-31.488 31.488z m-192.768-195.84c-9.472 0-15.872-3.072-22.016-9.472-12.544-12.544-12.544-31.488 0-44.288l79.104-79.104c12.544-12.544 31.488-12.544 44.288 0 12.544 12.544 12.544 31.488 0 44.288l-79.104 79.104c-6.656 6.4-12.8 9.472-22.272 9.472z m-211.968-12.544c-91.648 6.4-167.424 85.248-167.424 180.224s72.704 170.752 167.424 180.224V335.104z'
      },
      {
        code: 'onTime',
        d:'M512 918.0479c-224.25653 0-406.0479-181.791369-406.0479-406.0479s181.791369-406.0479 406.0479-406.0479 406.0479 181.791369 406.0479 406.0479S736.25653 918.0479 512 918.0479L512 918.0479zM512 156.708088c-196.226127 0-355.291912 159.065785-355.291912 355.291912s159.065785 355.291912 355.291912 355.291912 355.291912-159.065785 355.291912-355.291912S708.226127 156.708088 512 156.708088L512 156.708088zM702.82921 562.166563 511.410576 562.166563l-49.563836 0 0-49.563836L461.84674 321.184093c0-13.687744 11.093662-24.78243 24.781406-24.78243 13.687744 0 24.78243 11.094686 24.78243 24.78243l0 191.418634 191.418634 0c13.687744 0 24.78243 11.093662 24.78243 24.781406C727.611639 551.059598 716.516954 562.15326 702.82921 562.166563L702.82921 562.166563z'
      },
      {
        code: 'LUX',
        d: 'M689.4 651.7c-4 7.1-11.6 11.5-19.7 11.5-8.2 0-15.7-4.3-19.8-11.4-4.1-7.1-4-15.7 0.1-22.8 38.5-66.7 23.4-151.3-35.6-200.7-59.1-49.5-145.2-49.6-204.4-0.3-59.2 49.3-74.4 133.9-36.2 200.7 4.4 7 4.5 15.9 0.4 23.1-4.1 7.2-11.8 11.6-20.1 11.5-8.3-0.1-15.9-4.7-19.8-12.1-49.2-85.9-29.6-194.6 46.5-258 76.1-63.4 186.9-63.3 262.8 0.4 76 63.6 95.2 172.3 45.8 258.1zM512 186.9c6 0 11.8 2.4 16.1 6.6 4.3 4.3 6.7 10 6.7 16v75.6c0 8.1-4.3 15.6-11.4 19.6-7 4-15.7 4-22.7 0-7-4.1-11.4-11.5-11.4-19.6v-75.6c0-12.5 10.1-22.6 22.7-22.6z m363.8 362.9c0 6-2.4 11.8-6.7 16-4.3 4.3-10 6.6-16.1 6.6h-75.8c-12.6 0-22.7-10.2-22.7-22.7s10.2-22.7 22.7-22.7H853c6 0 11.8 2.4 16.1 6.6 4.3 4.4 6.7 10.2 6.7 16.2z m-606.3 0c0 6-2.4 11.8-6.7 16-4.3 4.3-10 6.6-16.1 6.6h-75.8c-12.6 0-22.7-10.2-22.7-22.7s10.2-22.7 22.7-22.7h75.8c6 0 11.8 2.4 16.1 6.6 4.3 4.4 6.7 10.2 6.7 16.2z m499.7-256.6c8.9 8.9 8.9 23.2 0 32.1l-53.6 53.5c-8.9 8.6-23.1 8.5-31.9-0.3-8.8-8.7-8.9-22.9-0.3-31.8l53.6-53.5c9-8.9 23.4-8.9 32.2 0z m-428.7 85.5c-8.9 8.8-23.3 8.8-32.1 0l-53.6-53.5c-6.1-5.7-8.6-14.2-6.5-22.2 2.1-8 8.3-14.3 16.4-16.4 8.1-2 16.6 0.4 22.3 6.5l53.6 53.4c4.3 4.3 6.7 10 6.7 16-0.2 6.2-2.6 12-6.8 16.2z m73 322.3h197.1c12.6 0 22.7 10.2 22.7 22.7s-10.2 22.7-22.7 22.7H413.5c-12.6 0-22.7-10.2-22.7-22.7-0.1-12.5 10.1-22.7 22.7-22.7z m-60.7 90.7h318.3c12.6 0 22.7 10.2 22.7 22.7s-10.2 22.7-22.7 22.7H352.8c-12.6 0-22.7-10.2-22.7-22.7s10.2-22.7 22.7-22.7z m0 0'
      },
      {
        code: 'CCT',
        d: 'M739.1232 679.936v-121.0368h-48.3328v121.0368h-121.0368v48.3328h121.0368v121.0368h48.3328v-121.0368H860.16V679.936h-121.0368zM888.6272 122.88H176.3328C135.5776 122.88 102.4 156.0576 102.4 196.8128v712.2944C102.4 949.8624 135.5776 983.04 176.3328 983.04h712.2944c40.7552 0 73.9328-33.1776 73.9328-73.9328V196.8128C962.56 156.0576 929.3824 122.88 888.6272 122.88zM204.8 348.16h327.68v56.9344H204.8V348.16z m716.8 560.9472c0 18.2272-14.7456 32.9728-32.9728 32.9728H176.3328c-3.6864 0-7.168-0.8192-10.6496-1.8432L919.7568 186.1632c1.024 3.4816 1.8432 6.9632 1.8432 10.6496v712.2944z'
      }
    ];
    const showIcon = iconFont.find(item=>{
      return item.code === code;
    })
    return (
      <Svg width='32' height='32' viewBox='0 0 1024 1024'>
        <Path
          d={showIcon.d}
          fill='#333333'
        />
      </Svg>
    )
  }