前言
作为前端开发人员，我们经常需要使用 icon 来装饰我们的应用。而使用 icon 的过程中，最麻烦的一件事情就是找到适合自己项目的 icon 库。今天，我带来了一个非常不错的 icon 库@beisen-cmps/ux-m-platform-icon，并且会讲述如何使用该库。
安装
首先在 terminal 中进入项目的 root 目录，然后输入下面的命令安装@beisen-cmps/ux-m-platform-icon：
--- ------- ------------------------------- ----------
引入
安装完成后，我们需要在项目中的模块中引入 icon：
-- ------- ------ --------------------------------------------- -- -- --- ------ - ---- - ---- ---------------------------------- -- ----
使用
基础用法
使用 icon 的基本方法就是通过name属性来指定要显示的 icon，在Icon标签内部添加其他文本或者标签，Icon 内部的内容与普通文本一样：
---- - --- --- --- ----- ------------------- ---- - ----- - --- ----- ----------- -- ---- --- ---- - --- -- -------------- ---------------
使用 font-class 方式
@beisen-cmps/ux-m-platform-icon 中另一种常用的使用方式是直接添加 class 名字，这些 class 名字是基于 icon 名字自动生成的，比如 icon 名为edit，那么 class 名就是icon-edit：
---- - --- --- --- ----- ------------------------- ---- - ----- - --- ----- --------------------- -- ---- --- ---- - --- -- -------------- ---------------
API
Icon 组件支持以下属性：
| 属性名 | 类型 | 描述 |
|---|---|---|
| name | string | icon 的名字 |
| size | string | icon 的大小，默认为16px |
| color | string | icon 的颜色 |
示例代码：
---- - --- --- --- ----- ----------- ----------- -------------------- ---- - ----- - --- ----- ----------- ----------- ------------ -- ---- --- ---- - --- -- -------------- ---------- ----------------- ----- ------ -----------
总结
在本文中，我们学习了如何安装和使用@beisen-cmps/ux-m-platform-icon，并且掌握了两种常见的使用方式。虽然本文只是简单介绍了这个库的基本用法，但是希望本文可以对您有所帮助。如果你还想深入了解该库，可以访问官网: https://github.com/iehaiming/iconfont-react-native。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f67f1b86099112f39633413