# build-react-svg

> 自动化把 简单的svg icons（具体要求见下面的压缩规则）批量构建为react组件，并对svg进行内容压缩

Latest version **0.0.7** (published 2018-04-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install build-react-svg
pnpm add build-react-svg
yarn add build-react-svg
bun add build-react-svg
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2018-04-26 |
| First published | 2017-10-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 259.9 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | jzl |

## Links

- npm: https://www.npmjs.com/package/build-react-svg
- npm.io page: https://npm.io/package/build-react-svg

## Dependencies (6)

- [glob](https://npm.io/package/glob.md) ^7.1.2
- [svgo](https://npm.io/package/svgo.md) ^1.0.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [bluebird](https://npm.io/package/bluebird.md) ^3.5.1
- [fs-extra](https://npm.io/package/fs-extra.md) ^4.0.1
- [nunjucks](https://npm.io/package/nunjucks.md) ^3.0.1

## Recent versions

- 0.0.7 (latest) — 2018-04-26
- 0.0.6 — 2017-12-05
- 0.0.5 — 2017-12-05
- 0.0.4 — 2017-11-03
- 0.0.3 — 2017-10-28
- 0.0.2 — 2017-10-28
- 0.0.1 — 2017-10-27

## README

# 用途

自动化把 简单的svg icons（具体要求见下面的压缩规则）批量构建为react组件，并对svg进行内容压缩

```javascript
const getCode = require('build-react-svg');
genCode(originDir, compsDir, demoFilePath, { defaultClass: 'lls-cc-svg-icon' });
```

1. originsDir: 原始svg所在文件夹，里面的svg文件只能有一层， 不能存在 `originsDir/xx/yy.svg`, 只能是`originsDir/yy.svg`
2. compsDir: 组件文件目录， react组件将会自己写入这个文件夹
3. demoFilePath: 会生成一个 DemoComp, 包含所有的svg icons(样式可能需要自己写)
4. options:
  - `defaultClass`, 默认是`lls-svg-icon`. 每个react svg 组件会加 className, 命名规则是 defaultClass + ' ' + 和fileName 的className
  -  `compTplStr`, 生成 react component 的njk模板，默认为src/react.njk. 你可以根据需要进行微调。
  - `demoTplStr`, 生成 demo component 的njk模板。 用来展示所有生成的svg组件的，默认为src/demo.njk. 你可以根据需要进行微调。
  - `svgo`, svgo 实例，用来进行svg内容的压缩，具体参考 `svgo` 项目
  - `force`, 如果react component 已经存在，默认不覆盖，force 设为true， 强制覆盖

# 压缩规则
会对svg进行压缩，目前从 `sketch` 里export的简单icon，测试了有几十个，都可以work。要求原svg 主要的结构为
```jsx
  <svg>
    <g>
      <some-tag />
      <path d="..."/>
    </g>
  </svg>
```
即 `g` tag里只有一个 `path`

压缩包括
1. 去掉不必要的element， 一般情况只应该是 `<svg><path /></svg>` 这样的结构
2. `fill` 和 `stroke` 全部删掉，请使用css 进行颜色设置

---
_Source: https://npm.io/package/build-react-svg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._