IconFont

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.