Original address: github.com/HuJiaoHJ/bl…

Most icon implementations of React Native on the Internet use iconfont scheme, that is, react-native Vector-icons

There is a problem in this scheme: it is strongly dependent on client packaging, that is, every new icon needs to be repackaged by the client, and RN cannot be decoupled from the client in resource management

To avoid this problem, the SVG scheme: React-native-SVG is used to implement the Icon

The following three aspects will be shared:

  • The react – native – SVG is used
  • Icon component implementation and 2Web
  • Icon component usage

This article will cover how to convert React Native to the Web using the React Native web solution. Check out my previous article: React Native to the Web solution using React Native

The react – native – SVG is used

The installation

npm install react-native-svg --save
Copy the code

Link native code

react-native link react-native-svg
Copy the code

The above operation is actually to install the react-native SVG dependency into the client. After the above operation, the dependency installation is basically completed automatically. However, some IOS may have problems

react-native-svg-uri

React-native-svg-uri supports rendering SVG from a URL or static file in RN, as well as passing in SVG strings to render them

Use as follows:

NPM install react-native SVG-uri --save // Ensure that the react-native SVG dependency is installed on the client. If the dependency is not installed, run the following command:  react-native link react-native-svgCopy the code

We will use the react-native SVG-URI to implement the Icon component. This library contains only two js files

Icon component implementation and 2Web

implementation

As mentioned above, react-native-SVG-URI supports passing IN SVG strings to render SVG. Therefore, multiple SVG files can be converted into a JS object or a JSON file using a script format as follows:

svg.js

export default {
    "arrow-left": "< SVG t= "1533091848499 "class= "icon" style= "" viewBox= "0 0 1024 1024" version= "1.1" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"579\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" Height =\"32\">
      
       
      
      
        < / path > < / SVG >"
      
}
Copy the code

When used, the value of the corresponding key can be passed to the react-native SVG-URI rendering

The above conversion script can be referred to: svg2json, the code: github.com/HuJiaoHJ/sv…

After the file conversion, we can develop the Icon component

index.js

import createIconSet from './create-icon-set';
// This is the svg.js converted above
import svg from './svg';

const Icon = createIconSet(svg, 'rn_components');

export default Icon;

export { createIconSet };
Copy the code

creact-icon-set.native.js

import React, { Component } from 'react';
import SvgUri from 'react-native-svg-uri';

export default function createIconSet(svg, fontName) {
    return class Icon extends Component {
        render () {
            const { icon, color, size, style } = this.props;
            let svgXmlData = svg[icon];

            if(! svgXmlData) {let err_msg = `no "${icon}"`;
                throw new Error(err_msg);
            }
            return (
                <SvgUri width={size} height={size} svgXmlData={svgXmlData} fill={color} style={style} />); }}; }Copy the code

That is the implementation of the Icon component

2web

RN2web: React Native To The Web

On this basis, we need to support 2Web for our Icon component. Since there is no corresponding Web component, we need to realize the corresponding Web component by ourselves

On the Web side, we use iconfont to make Icon components (note: Iconfont does not support multicolor ICONS, and multicolor ICONS can only be SVG or IMG).

Or SVG file conversion problem, we need to first convert SVG file to iconFONT, that is

So we can use iconfont just like we would on the web

Svg2iconfont, code: github.com/HuJiaoHJ/sv…

Of course, remember to import the generated iconfont. CSS file into the HTML page. Next, take a look at the Icon component implementation of 2Web. Simply add the creact-icon-set.js file to the same folder (note that the above RN file is creact-icon-set.native.js), this will automatically recognize the two files in actual use

creact-icon-set.js

import React, { Component } from 'react'
import { createElement, StyleSheet } from 'react-native'

export default function createIconSet(svgs, fontName) {
  return class Icon extends Component {
    render() {
      const { icon, color, size, style } = this.props
      const styles = StyleSheet.create({
        iconStyle: {
          color,
          fontSize: size,
        },
      })
      const props = {
        className: `${fontName ? fontName + The '-' : 'icon-'}${icon}`.style: StyleSheet.compose(
          style,
          styles.iconStyle
        ),
      }
      return createElement('i', props)
    }
  }
}
Copy the code

React Native to the Web The react – native – web, Import {createElement, StyleSheet} from ‘react-native’ is actually import {createElement, StyleSheet} from ‘react-native Web ‘, yes, it’s a direct use of the React-Native Web API to develop components that go to the Web

This completes 2Web support for the Icon component

Icon component usage

How do we use it? There are two cases:

Use the Icon component that comes with the Icon

The Icon component will come with some commonly used ICONS. When using these ICONS, it is relatively simple to use and directly introduced as follows:

/ / introduction
import Icon from 'Icon';

/ / use
<Icon icon={'arrow-left'} size={30} / >Copy the code

Note: If you want to support 2Web, you need to introduce the corresponding iconfont. CSS into the page HTML

Using business Icon

If you need to add a business icon, there are two steps as follows:

1. Convert SVG to JS files (if 2Web is required, iconFONT is also required)

This part is not detailed, you can refer to the above content

2. Call createIconSet to create the CIcon component

The code is as follows:

import React from 'react'
// Introduce the createIconSet method of the Icon component
import { createIconSet } from 'Icon'
// The js file containing the business SVG
import svgs from './svgs'

// Pass in the js object of the business SVG to generate the CIcon component
const CIcon = createIconSet(svgs)

export default function () {
  return Object.keys(svgs).map((item, index) = > (
    / / use
    <CIcon icon={item} color={'# 000'} size={50} key={index} />
  ))
}
Copy the code

All of the above code can be seen in the project for my RN component library: RN_Components, which is just under construction and will continue to be improved

Write in the last

The above is my share of React Native Icon solution: React-Native SVG. I hope it can be helpful for those who need it

If you like my articles, go to my personal blog star ⭐️