前言
在前端页面开发中，常常需要使用图标来丰富页面样式，但是手写 SVG 图标代码繁琐而且容易出错，因此使用图标字体库是一个很好的解决方案。本文将介绍一款优秀的 iconfont 库：@tornography/nms-glyphs，本文将详细介绍如何使用该库来优化您的开发体验。
什么是 @tornography/nms-glyphs
@tornography/nms-glyphs 是一个基于 SVG 的 iconfont 库，它提供了大量可爱且美观的图标。如果您的项目使用基于 React 的技术栈，那么该库使用起来将非常方便。
安装和引入
使用 npm 包管理工具进行安装：
--- ------- ----------------------- ------
在项目中引入组件即可使用，如下所示：
------ - --------- - ---- --------------------------
----- --- - -- -- -
------ -
-----
---------- ------------ --
------
--
--NmsGlyphs 属性
接下来，我们来看一下 NsmGlyphs 支持的属性：
name
必填属性，该属性对应的是要显示的 icon 的名字，值为字符串类型，本库提供的所有图标都可以在 GitHub 官网找到。
size
可选属性，该属性对应的是 icon 显示的大小，值为 number 类型，默认值是 16。
color
可选属性，该属性对应的是 icon 的颜色值，值为字符串类型，默认值是当前字体的颜色值。
type
可选属性，该属性对应的是 icon 的类型，值为字符串类型，默认值是 outline。
className
可选属性，该属性对应的是 icon 的 class 名称，值为字符串类型。
使用示例
下面，我们来看一下如何使用 @tornography/nms-glyphs 来展示图标：
------ - --------- - ---- --------------------------
----- ------- - -- -- -
------ -
-----
------ ---------
---------- ------------ --
------ ---------
---------- ----------- --
------
--
--上面的代码将会在页面上展示两个图标：爱心和星星。
总结
本文介绍了前端使用 @tornography/nms-glyphs 进行 iconfont 开发的方法，介绍了库的基本属性和使用示例，希望对您在开发过程中选择合适的图标库和提高开发效率有帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5651ab1864dac66b42