[English](./README.md) | 简体中文
# @ray-js/svg
[](https://www.npmjs.com/package/@ray-js/svg) [](https://www.npmjs.com/package/@ray-js/svg)
> Tuya Ray Svg
## 安装
```sh
$ npm install @ray-js/svg
// 或者
$ yarn add @ray-js/svg
```
## 单位适配
`rpx2px` 支持转 rem 或 px，Icon 组件内置支持，但是 Svg 组件内的标签不可控所以需要开发者自行引用 `rpx2px` 方法适配。
## 图标切图指南（Figma）
1. 选图标：选中对应图标导出，如果不是一个 Group，可以 Group Selection 然后 Flatten。
2. 修改 viewport：Icon 组件统一的 viewport 是 "0 0 1024 1024"，需要符合这个标准。
3. 导出图标：将 Figma 中选中的图标复制到 https://jakearchibald.github.io/svgomg/ 看一下路径是否是多个，如果不是可以直接复制 path，如果是，推荐使用 vscode SVG 插件压缩一下 path。
4. 多 path：如果遇到无法合并 path 的 svg，仍可以使用 Icon 的多 path 模式。
## 使用
### Icon（单 path）
```tsx
import { Icon } from '@ray-js/svg';
;
```
### Icon（多 path、多色）
```tsx
import { Icon } from '@ray-js/svg';
;
```
### 圆形
```tsx
import Svg from '@ray-js/svg';
;
```
### 裁切
```tsx
import Svg from '@ray-js/svg';
;
```
### 矩形
```tsx
import Svg from '@ray-js/svg';
;
```
### 椭圆渐变
```tsx
import Svg from '@ray-js/svg';
;
```
### 阴影
```tsx
import Svg from '@ray-js/svg';
;
```
### 进度条
```tsx
import React from 'react';
import Svg from '@ray-js/svg';
import {useInterval} from 'ahooks'
const percent = React.useRef(0)
const [stroke, setStroke] = React.useState(0)
const scope = 330
useInterval(() => {
if (percent.current >= 0 && percent.current < 100) {
percent.current = percent.current + 1
setStroke(percent.current / 100 * scope)
} else {
percent.current = 0
setStroke(0)
}
}, 1000)
```