npm 包 @beisen-cmps/ux-m-platform-icon 使用教程

前言

作为前端开发人员，我们经常需要使用 icon 来装饰我们的应用。而使用 icon 的过程中，最麻烦的一件事情就是找到适合自己项目的 icon 库。今天，我带来了一个非常不错的 icon 库@beisen-cmps/ux-m-platform-icon，并且会讲述如何使用该库。

安装

首先在 terminal 中进入项目的 root 目录，然后输入下面的命令安装@beisen-cmps/ux-m-platform-icon：

npm install @beisen-cmps/ux-m-platform-icon --save-dev

引入

安装完成后，我们需要在项目中的模块中引入 icon：

// test.js
import '@beisen-cmps/ux-m-platform-icon/styles.css'; // 引入 css
import { Icon } from '@beisen-cmps/ux-m-platform-icon'; // 引入组件

使用

基础用法

使用 icon 的基本方法就是通过name属性来指定要显示的 icon，在Icon标签内部添加其他文本或者标签，Icon 内部的内容与普通文本一样：

<!-- 在 vue 组件中 -->
<icon name="edit"></icon>

<!-- 在 React 中 -->
<Icon name="edit" />

<!-- 在原生 html 中 -->
<i class="ux-icon icon-edit"></i>

使用 font-class 方式

@beisen-cmps/ux-m-platform-icon 中另一种常用的使用方式是直接添加 class 名字，这些 class 名字是基于 icon 名字自动生成的，比如 icon 名为edit，那么 class 名就是icon-edit：

<!-- 在 vue 组件中 -->
<icon class="icon-edit"></icon>

<!-- 在 React 中 -->
<Icon className="icon-edit" />

<!-- 在原生 html 中 -->
<i class="ux-icon icon-edit"></i>

API

Icon 组件支持以下属性：

示例代码：

<!-- 在 vue 组件中 -->
<icon name="edit" size="20px" color="#000"></icon>

<!-- 在 React 中 -->
<Icon name="edit" size="20px" color="#000" />

<!-- 在原生 html 中 -->
<i class="ux-icon icon-edit" style="font-size: 20px; color: #000;"></i>

总结

在本文中，我们学习了如何安装和使用@beisen-cmps/ux-m-platform-icon，并且掌握了两种常见的使用方式。虽然本文只是简单介绍了这个库的基本用法，但是希望本文可以对您有所帮助。如果你还想深入了解该库，可以访问官网: https://github.com/iehaiming/iconfont-react-native。

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