#npm 包 @atlaskit/icon-object 使用教程
##1.0 什么是 @atlaskit/icon-object
@atlaskit/icon-object是一个可广泛应用于前端开发的npm包,主要提供了图标渲染的模块。作为Atlassian开发的一个前端UI框架,该包可以轻松帮助您快速构建基于Atlassian设计语言的UI应用程序。
##2.0 @atlaskit/icon-object的使用方法
2.1 安装
在项目根目录下运行以下命令来安装@atlaskit/icon-object:
--- ------- ------ ---------------------
2.2 引入
在您需要使用@atlaskit/icon-object的文件中引入包:
------ ---------- ---- ------------------------
2.3 使用
----------- -------- ------- --- ---------------- ---- --- ------------------ ---- --- -------- ---- --- --------- ---- ------ --- --
- data:SVG代码字符串,必需
- primaryColor:图标填充颜色,可选
- secondaryColor:图标边框颜色,可选
- size:图标尺寸,可选,默认 24px
- label:图标名称,用于可访问性
除了以上参数,还有一些根据需要自行添加
----------- ------------ ---------------- ------------------ ---------------------- ------------- --------------- ------------------------- --------- ------------ -- --
testId
:用于测试的id名,可选(默认情况下没有testId属性)dangerouslySetSvgProps
:名为dangerouslySetSvgProps
的对象与ReactSVG传递的对象相同,可选
2.4 示例
------ ----- ---- -------- ------ ---------- ---- ------------------------ ----- ------ - -- ------------- -------------- -- -- - ------ - ----------- ----------- ---------------------------------- ---------- - -- ---- ----- ----- ----------- ---------------------- ---------------------------- ----- ------ --- -------------- --- ---------------------- ---------------------------- -------- --------------------------- ------------------------------- --------- ------------- ---- -------- -- -- -- ------ ------- -------
------- ------------------ ---------------------- --
3.0 总结
使用@atlaskit/icon-object,您可以轻松地以 Atlassian 风格生成图标,而无需编写任何额外的 CSS 代码。需要提醒的是,要使用该包,前提是您必须已经熟悉React和SVG。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5eedab44b5cbfe1ea06106d1