npm 包 @dhis2/ui-icons 使用教程

阅读时长 3 分钟读完

介绍:

@dhis2/ui-icons 是基于 React 实现的 Icon 图标库,它是 DHIS2 所推出的 UI 库之一。它提供了 26 种符号和图标,包括箭头、三角形、图钉等经常使用的常见符号。本文将详细介绍如何在项目中使用 @dhis2/ui-icons。

安装:

首先,在命令行中输入以下命令进行安装:

使用:

一旦安装成功,就可以在 React 项目中使用 @dhis2/ui-icons。使用示例:

-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- ------------------

----- ----------- - -- -- -
  ------ -
    -----
      ---------------- --
      ----------------
    ------
  --
--

------ ------- ------------

@dhis2/ui-icons 导出了所有可用的图标,导入时使用 ES6 的解构赋值将需要的图标导入即可。

指令式使用:

此外,@dhis2/ui-icons 还可以使用指令式调用。要使用指令式调用,首先需要向组件传递 name 属性。name 属性的值对应着 @dhis2/ui-icons 中的图标名称,例如“arrow-upward”或“warning-standard”,而这些图标的名称可以从 @dhis2/ui-icons 的源代码中找到。

-- -------------------- ---- -------
------ - ------- - ---- --------------------
------ ----- ---- --------
------ - -------- ---------- - ---- -----------------
------ - ----------- - ---- ------------------

----- ----------- - -- -- -
  -------- -------------
    ------------
      ---------
        ------------ ------------------- --
      ----------
    -------------
  ----------
--
------ ------- ------------

以上示例显示了如何使用 @dhis2/ui-icons 组件的指令式调用方法创建一个上箭头图标。在这个例子中,传递给 name 属性的值是“arrow-upward”。此外,这个例子还演示了如何在 IconButton 组件中嵌套 @dhis2/ui-icons。

总结:

通过本文对 @dhis2/ui-icons 包的入门介绍和使用示例,读者应该已经了解了如何在自己的 React 应用程序中使用 @dhis2/ui-icons。这个 UI 库提供了一系列图标和符号,为开发者们提供了开箱即用的解决方案,帮助开发者更便捷地完成前端开发工作。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedb47db5cbfe1ea06112c4

纠错
反馈