@deriv-com/quill-icons-web (中文(简体) )
反应 Deriv 的图标组件 奎尔 设计系统。 每个图标都会生成 quill Figma 图书馆的直取—— 真理的单一来源—— 那么.. 导入总是匹配设计.
安装
npm install @deriv-com/quill-icons-web
# pnpm add @deriv-com/quill-icons-web
# yarn add @deriv-com/quill-icons-web
react >= 17 要求作为同伴依赖.
使用量
import { Num0FlagPlaceholderIcon } from '@deriv-com/quill-icons-web'
export function Example() {
return <Num0FlagPlaceholderIcon size={32} />
}
图标 系统 组合为单色并继承周围文本
颜色通过 currentColor数字 :
<span style={{ color: 'rebeccapurple' }}>
<ArrowLeftRegularIcon size={24} />
</span>
其他团体(旗子,市场,货币,账户,.)保留其固定品牌 来自Figma的颜色——不要用期望它们会发花的颜色来包装.
道具
每个图标扩展 React.SVGProps<SVGSVGElement> 并添加:
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
size | number | string | 24 | 设置宽度和高度. |
其它 SVG 道具 (className, (中文(简体) ), fill, (中文(简体) ), onClick, (中文(简体) ), ref, (中文(简体) ), aria-*,.) 通过
直通深处 <svg>。 。 。 .
每组进口
导入一个组来保持事物的整洁( 包是完全可树动的 ) 无论是哪种方式:
import { Num0FlagPlaceholderIcon } from '@deriv-com/quill-icons-web/flag'
可用组 : accounts, (中文(简体) ), app-stores, (中文(简体) ), currency, (中文(简体) ), flag, (中文(简体) ), markets, (中文(简体) ),
social, (中文(简体) ), system, (中文(简体) ), trade。 。 。 .
原始 SVGs 软件
如果您直接需要, 源 SVG 在包中文件船 :
import iconUrl from '@deriv-com/quill-icons-web/svg/flag/0-flag-placeholder.svg'
格式
具有类型Script型的船舶ESM + CommonJS. sideEffects: false 为了震动树木.
源码版本( V)
由Figma公司通过管道生成 衍生物/产品-设计-清点-角。 。 。 . 所生成的文件不是由手工编辑的——来自Figma库的修改流出.
许可证
麻省理工学院 衍生