图标（Icon）

Molecule 默认引用了 @vscode/codicons 字体图标，并且我们提供了 React Icon 组件版本。

基本使用

tip

本文内容中的所有代码，都以 Quick Start 中的 molecule-demo 项目为基础演示。

引入 Icon 组件

import molecule from '@dtinsight/molecule';
<molecule.component.Icon type="check" />;

或者

import { Icon } from '@dtinsight/molecule/esm/components';
<Icon type="check" />;

type 为图标名称，完整的名称请参考这个预览地址。

使用 Icon 类名

如果不想使用内置的 React Icon 组件，也可以使用 Icon 字体的的类名（className）来使用 codicon 图标, 例如：

<span class="codicon codicon-arrow-both"></span>

tip

完整的 @vscode/codicons 图标在线预览地址，请点击这里！