@ray-js/svg v0.1.8

English | 简体中文

@ray-js/svg

Tuya Ray Svg

Installation

$ npm install @ray-js/svg
# or
$ yarn add @ray-js/svg

Unit Adaptation

rpx2px supports conversion to rem or px, and the Icon component has built-in support, but the tags in the Svg component are uncontrollable, so developers need to use the rpx2px method for adaptation.

Icon Cutout Guide (Figma)

1. Select icon: select the corresponding icon to export, if it is not a Group, you can Group Selection and then Flatten.
2. Modify the viewport: the unified viewport of the Icon component is "0 0 1024 1024", which needs to meet this standard.
3. Export icon: Copy the icon selected in Figma to https://jakearchibald.github.io/svgomg/ to see if there are multiple paths, if not, you can directly copy the path, if so, it is recommended to use the vscode SVG plug-in to compress it path.
4. Multi-path: If you can't meet svg that cannot combine paths, you can still use Icon's multi-path mode.

Usage

Circle

import Svg from '@ray-js/svg';

<Svg width="80px" height="80px">
  <circle cx="40" cy="40" r="40" fill="red" />
</Svg>;

Clip

import Svg from '@ray-js/svg';

<Svg width="80px" height="80px" viewBox="40 40 40 40">
  <circle cx="40" cy="40" r="40" fill="red" />
</Svg>;

Rectangle

import Svg from '@ray-js/svg';

<Svg width="200px" height="100px">
  <rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</Svg>;

Ellipse Gradient

import Svg from '@ray-js/svg';

<Svg width="170px" height="110px">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="85" cy="55" rx="85" ry="55" fill="url(#grad1)" />
</Svg>;

Shadow

import Svg from '@ray-js/svg';

<Svg>
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</Svg>;

Progress

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)

<Svg
  width="160px"
  height="160px"
>
  <defs>
    <linearGradient id="color">
      <stop offset="0%"  stop-color="#229453"/>
      <stop offset="50%"  stop-color="#66c18c"/>
      <stop offset="100%" stop-color="#b9dec9"/>
    </linearGradient>
  </defs>
  <circle cx='80' cy='80' r='70' stroke='#999999' stroke-width="20" fill="none" stroke-dasharray="330,300" stroke-linecap="round" transform="rotate(135, 80, 80)"></circle>
  <circle cx='80' cy='80' r='70' stroke='pink' stroke-width="10" fill="none"  stroke-dasharray="330,300" stroke-linecap="round" transform="rotate(135, 80, 80)"></circle>
  <circle cx='80' cy='80' r='70' stroke='url(#color)' stroke-width="10" fill="none" style={`stroke-dasharray: ${stroke},900; transition: stroke-dasharray 2s`} stroke-linecap="round" transform="rotate(135, 80, 80)"></circle>
</Svg>