IconFont 图标

更新时间:2024-06-05 03:14:33下载pdf

简介

语义化的矢量图标。

代码演示

说明:详细示例可参考 IconFont Demo

基础使用

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="内置IconSvg" /> <IconFont name="0" size={50 * 0.72} color="red" /> <TesterTitle title="自定义IconSvg" /> <IconFont d={svgs.plus} size={50 * 0.72} color="red" /> <TesterTitle title="多个IconSvg" /> <IconFont d={[svgs[1], svgs[2]]} size={50 * 0.72} color="red" /> </ScrollView> ); }; export default IconScene;

所有内置图标

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;

交互演示

IconFont 图标

API

style

svg 容器样式。

类型 必传 默认值
ViewPropTypes.style

viewBox

svg 视口。

类型 必传 默认值
string 0 0 1024 1024

name

组件库内置图标名称,可以从组件库默认图标中获取,优先级大于 d,默认的内置图标 name 可参考 defaultSvg

类型 必传 默认值
string null

color

图标颜色。语义等同于fillstroke 的组合。指定 fillstroke 参数时 color 失效。

类型 必传 默认值
ColorPropType #000

size

图标大小。语义等同于widthheight的组合。

类型 必传 默认值
number 12

hFlip

水平翻转。

类型 必传 默认值
bool false

vFlip

垂直翻转。

类型 必传 默认值
bool false

d

图标 pathsvgpath

类型 必传 默认值
string null

width

图标宽度,默认为 size 的值。

类型 必传 默认值
number size的值

height

图标高度,默认为 size 的值。

类型 必传 默认值
number size的值

fill

填充色。如果传递该值, color 会被忽略。

类型 必传 默认值
ColorPropType color的值

stroke

描边色。

类型 必传 默认值
ColorPropType color的值

strokeWidth

描边宽度。

类型 必传 默认值
number 1

strokeJoin

连接处形状:

  • round:圆形。
  • miter:斜接。
  • bevel:斜切。
类型 必传 默认值
enum: round, miter, bevel round

strokeCap

首尾端形状:

  • round:圆形。
  • butt:无。
  • square:方形。
类型 必传 默认值
enum: round, butt, square round

strokeDash

实虚线。数组内第一个元素为一段虚线的长度,第二个参数为间距。

类型 必传 默认值
array

相关文档

react-native-svg/Path