#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：
npm install --save @atlaskit/icon-object
2.2 引入
在您需要使用@atlaskit/icon-object的文件中引入包：
import IconObject from '@atlaskit/icon-object';
2.3 使用
<IconObject
data={/* 图标SVG代码 */}
primaryColor={/* 填充颜色 */}
secondaryColor={/* 边框颜色 */}
size={/* 图标大小 */}
label={/* 图标名称 用于可访问性 */}
/>- data：SVG代码字符串，必需
- primaryColor：图标填充颜色，可选
- secondaryColor：图标边框颜色，可选
- size：图标尺寸，可选，默认 24px
- label：图标名称，用于可访问性
除了以上参数，还有一些根据需要自行添加
-- -------------------- ---- -------
-----------
------------
----------------
------------------
----------------------
-------------
---------------
-------------------------
--------- ------------
--
--testId:用于测试的id名，可选（默认情况下没有testId属性）dangerouslySetSvgProps:名为dangerouslySetSvgProps的对象与ReactSVG传递的对象相同，可选
2.4 示例
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ------------------------
----- ------ - -- ------------- -------------- -- -- -
------ -
-----------
----------- ---------------------------------- ---------- - -- ----
----- ----- ----------- ---------------------- ----------------------------
----- ------ --- -------------- --- ---------------------- ----------------------------
--------
---------------------------
-------------------------------
---------
------------- ---- --------
--
--
--
------ ------- -------<MyIcon primaryColor="red" secondaryColor="black" />
3.0 总结
使用@atlaskit/icon-object，您可以轻松地以 Atlassian 风格生成图标，而无需编写任何额外的 CSS 代码。需要提醒的是，要使用该包，前提是您必须已经熟悉React和SVG。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab44b5cbfe1ea06106d1