在很多前端开发的项目中,图标的运用是非常普遍的,而 Material Design Icons 是一个非常受欢迎的图标库,包含了超过 4,000 个精美的图标,可在任何 Web 或者移动应用中使用。在这篇文章中,我们将介绍如何使用 npm 包 @actra-development-oss/material-design-icons,并给出一些示例代码。
安装
使用 npm 包 @actra-development-oss/material-design-icons,首先需要在项目内安装该包,可以通过下列命令进行安装:
--- - --------------------------------------------
安装完成后,即可通过代码引入使用。
使用
我们可以通过引入前面安装好的 @actra-development-oss/material-design-icons 包来使用其内部的图标。例如,我们需要在一个按钮中添加 "search" 图标:
-------- -- ---------- ----------------- ------ ---------
在上面的代码中,我们使用到了 Material Design Icons 的一个图标叫做 "mdi-magnify",这个图标的使用方法非常简单,只需要引入包后在 HTML 文件中使用即可。
如果需要保存该图标,比如因为在多个页面上重复使用,可以在项目中新建一个 icons.scss 文件并在其中定义相关样式:
---------------- ------------------------------------------------------ --------- ------- ------------------------------------------------------------------------------- ------- --------------------------------------------------------------------- ---- - --------- - ------------ --------- ------- ------------ ------- ----------- ------- -------- ------------- ---------------- -------- ----------- ------- ------------ -- --------------- ---- --------------- ----- ------------ ------- ---------- ------- ---------- ---- --------------------------- ------- ------------------------ ---------- ----------------------- ------------ ---------- -------- ------ ------------- -------- ---------------- - -
这样我们就可以在所有页面上使用定义好的样式了,只需要为需要添加图标的元素加上 icon 类名并使用 data-icon 属性来指定图标名称即可:
-------- -- ----------- ----------------------- ------ ---------
以上示例代码会在页面上生成一个按钮,按钮上带有一个搜索图标。
总结
在本文中,我们介绍了如何使用 npm 包 @actra-development-oss/material-design-icons,以及一些图标的示例代码。希望这篇文章能为您带来一些有价值的内容并帮助您快速掌握 Material Design Icons 的使用方法。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005600e81e8991b448dde83