前言

在Rn中无法直接引用svg图片，我们习惯用react-native-svg或react-native-svg-transformer来帮助我们使用svg图片。 用法：

import About from './svg/about.svg';
<About width={10} height={10} />

由于每个svg图片都需要引入，就会造成每个页面代码都是一大串的svg引入。因此想写一个文件能导入所有的svg并导出，这样在使用的时候只需要引入该文件。

---

一、新建一个js文件用于生成导出文件

读取svg文件夹下的svg生成svg导出文件

//  getSvg.js 读取svg文件夹下的svg生成svg导出文件
var fs = require('fs');
var path = require('path');
//存放svg文件的文件夹路径
const svgDir = path.resolve(__dirname, './svg');

// 读取SVG文件夹下所有svg
function readSvgs() {
    return new Promise((resolve, reject) => {
        fs.readdir(svgDir, function (err, files) {
            if (err) reject(err);
            Promise.all(files.map(filename => {
                return filename
            }))
                .then(data => resolve(data))
                .catch(err => reject(err));
        });
    });
}

// 生成js文件
readSvgs()
    .then(data => {
        let svgFiles = data.filter(item => item.indexOf('.svg') != -1)//去除.DS_Store
        let exportFile = "import React, { Component } from 'react';\n"
        svgFiles.map(item => {
        //组建名为图标名称首字母大写
            let name = item.replace('.svg', '')
            name = name.charAt(0).toUpperCase() + name.slice(1)
            //svg所在的路径
            exportFile += `
                import ${name} from './svg/${item}';
                export class ${name}Svg extends Component {
                    render() {
                        return (
                            <${name} style={this.props.style} />
                        );
                    }
                }
            `
        })
        //生成的文件名及其路径
        fs.writeFile(path.resolve(__dirname, './svgs.js'), exportFile, function (err) {
            if (err) throw new Error(err);
        });
    }).catch(err => {
        throw new Error(err);
    });

二、使用及其注意事项

1.执行脚本

生成文件如下：

2.使用

代码如下（示例）：

//从生成文件中导出
import { AddDefaultSvg, DownDefaultSvg } from '@/assets/svgs'

<AddDefaultSvg style={comStyles.icon2XL} />

3.注意事项

1. 使用时，名称都是图标名首字母大写+Svg ，宽高都在style中传入 ，不使用width height
2. 添加或修改图标 ，删除原有的svgs.js并cd到脚本文件所在文件夹下执行 node getSvg.js，生成新的svgs.js文件，或在原有的svgs.js文件内进行修改

---

代码相关：svgRNDemo