IconFont

Last Updated on : 2024-06-05 03:14:33download

Overview

A semantic vector icon.

Code demo

Note: for more information, see IconFont Demo.

Basic use

import React from "react"; import { ScrollView } from "react-native"; import { IconFont } from "tuya-panel-kit"; import svgs from "tuya-panel-kit/src/components/iconfont/svg/defaultSvg"; import TesterTitle from "../../components/TesterTitle"; const IconScene = () => { return ( <ScrollView style={{ flex: 1, marginTop: 16 }}> <TesterTitle title="Built-in IconSvg" /> <IconFont name="0" size={50 * 0.72} color="red" /> <TesterTitle title="Custom IconSvg" /> <IconFont d={svgs.plus} size={50 * 0.72} color="red" /> <TesterTitle title="Multiple IconSvg" /> <IconFont d={[svgs[1], svgs[2]]} size={50 * 0.72} color="red" /> </ScrollView> ); }; export default IconScene;

All built-in icons

import React from "react"; import { TYFlatList } from "tuya-panel-kit"; import svgs from "tuya-panel-kit/src/components/iconfont/svg/defaultSvg"; // eslint-disable-line const iconDatas = Object.keys(svgs).map((name) => ({ key: name, title: name, iconSize: 24, iconColor: "red", Icon: name, })); const IconScene = () => <TYFlatList data={iconDatas} />; export default IconScene;

API

style

svg container style.

Type Required Default value
ViewPropTypes.style No None

viewBox

svg viewport.

Type Required Default value
string No 0 0 1024 1024

name

The name of the built-in icon of the component library, which can be obtained from the default icons of the component library. The priority is greater than d. For the default built-in icon name, see defaultSvg.

Type Required Default value
string No null

color

Icon color. Its semantics is equivalent to the combination of fill and stroke.

Type Required Default value
ColorPropType No #000

size

Icon size. Its semantics is equivalent to the combination of width and height.

Type Required Default value
number No 12

hFlip

Horizontal flip.

Type Required Default value
bool No false

vFlip

Vertical flip.

Type Required Default value
bool No false

d

Icon path and svg path.

Type Required Default value
string No null

width

Icon width. It is the value of size by default.

Type Required Default value
number No size value.

height

Icon height. It is the value of size by default.

Type Required Default value
number No size value.

fill

Fill color. If this value is passed, color will be ignored.

Type Required Default value
ColorPropType No color value.

stroke

Stroke color.

Type Required Default value
ColorPropType No color value.

strokeWidth

Stroke width.

Type Required Default value
number No 1

strokeJoin

Shape of the stroke join:

  • round: the stroke join is round.
  • miter: the stroke join is miter.
  • bevel: the stroke join is bevel.
Type Required Default value
enum: round, miter, bevel No round

strokeCap

Shape of the stroke cap:

  • round: the stroke cap is round.
  • butt: none.
  • square: the stroke cap is square.
Type Required Default value
enum: round, butt, square No round

strokeDash

Stroke dash. The first element in the array is the length of a dashed line, and the second parameter is the spacing.

Type Required Default value
array No None

Reference

For more information, see react-native-svg/Path.