跳到主要内容
版本:1.x

图标(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 图标在线预览地址,请点击这里!