open-index/open-npm huggingface dataset:
npm package: @ldesign/icons-iconfont
Description: Icons used like iconFont
Author: ldesign
Latest version: 0.5.2

## FontClass引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

- 兼容性良好，支持ie8+，及所有现代浏览器。
- 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

### 引入css文件

``` html
<link rel="stylesheet" href="https://unpkg.com/@ldesign/icons-iconfont@latest/dist/index.css">
```
### 渲染

``` html
<span class="l-icon l-icon-home"></span>
```
npm package: @ldesign/icons-react
Description: - `npm i tdesign-icons-react`
Latest version: 0.4.7

# TDesign Icons for React

## 安装

- `npm i tdesign-icons-react`

## 使用

```
// svgsprite
import { Icon } from 'tdesign-icons-react';

// iconfont
import { IconFont } from 'tdesign-icons-react';

// single icon
import { CloseIcon, TimeIcon } from 'tdesign-icons-react';

<Icon name="close" />;

<IconFont name="close" />;

<CloseIcon />;
```
npm package: @ldesign/icons-svg-sprite
Description: Icons used like a svgSprite
Author: ldesign
Latest version: 0.5.2

## Symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过`font-size`,`color`来调整样式。
- 兼容性较差，支持 `ie9+`,及现代浏览器。
- 浏览器渲染`svg`的性能一般，还不如`png`。

### 引入Symbol代码

``` html
<script src="https://unpkg.com/@ldesign/icons-svg-sprite@latest/dist/index.js"></script>
```

### 加入通用css代码

只需要添加一处即可


``` html
<style type="text/css">
  .l-icon {
      width: 1em; height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
  }
</style>
```

### 渲染图标

首先需要选取需要的图标名称，并进行定义，`xlink:href`后面的`#l-icon-`为固定模式，最后为图标名称。

``` html
<svg class="icon" aria-hidden="true">
  <use xlink:href="#l-icon-home"></use>
</svg>
```