IconFont 图标
代码演示
基础用法
import { IconFont } from 'tuya-panel-kit'<IconFont name="arrow" /><IconFont name="backAndroid" /><IconFont name="backIos" /><IconFont name="celsius" />
图标颜色
import { IconFont } from 'tuya-panel-kit'<IconFont color="#F84803" name="arrow" /><IconFont color="#F84803" name="backAndroid" /><IconFont color="#F84803" name="backIos" /><IconFont color="#F84803" name="celsius" />
图标大小
import { IconFont, Utils } from 'tuya-panel-kit';const { convertX: cx } = Utils.RatioUtils;<IconFont color="#F84803" size={cx(14)} name="arrow" /><IconFont color="#F84803" size={cx(24)} name="backAndroid" /><IconFont color="#F84803" size={cx(34)} name="backIos" /><IconFont color="#F84803" size={cx(44)} name="celsius" />
API
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| viewBox | Svg 视窗 | string | '0 0 1024 1024' |
| useART | 是否使用 ART 形式 | boolean | false |
| ascent | 上升 | number | 896 |
| descent | 下降 | number | -128 |
| unitsPerEm | 单位制 | number | 1024 |
| x | 图标起始横坐标 | number | 0 |
| y | 图标起始纵坐标 | number | 0 |
| scaleX | 图标宽度放大倍数 | number | null |
| scaleY | 图标高度放大倍数 | number | null |
| scale | 图标的放大倍数 | number | 1.0 |
| spaceOffset | 多个实体渲染时, 空白间隔偏移量, 可以让渲染更紧凑些 | number | 0 |
| style | 容器样式 | null | |
| color | 图标颜色，fill 和 stroke 的缩写 | any | "#000" |
| size | Icon 尺寸，width / height 的缩写 | number | 12 |
| hFlip | 水平翻转 | boolean | false |
| vFlip | 垂直翻转 | boolean | false |
| name | 图标id，会从组件库默认图标里取，优先级小于 d | undefined | |
| width | 图标宽度，默认为 size 的值 | number | 12 |
| height | 图标高度，默认为 size 的值 | number | 12 |
| fill | 填充色，若传递该值 color 会被忽略 | string | null |
| stroke | 描边色 | string | null |
| strokeWidth | 描边宽度 | number | 1 |
| strokeJoin | 连接处形状 | 'round' | 'miter' | 'bevel' | "round" |
| strokeCap | 首尾端形状 | 'round' | 'butt' | 'square' | "round" |
| strokeDash | 实虚线，数组内第一个元素为一段虚线的长度，第二个为间距 | number[] | [0, 0] |
| d | 图标 path，svg 的 path | string | '' |
| opacity | 路径透明度 | string | number | null |
FAQ
- 更多资料?