介绍
指南
API 文档
常见问题
介绍
指南
API 文档
常见问题

图标

XinAdmin 提供了丰富的图标资源和便捷的图标选择器组件，方便开发者在项目中使用各种图标。

图标类型

XinAdmin 支持以下类型的图标：

  • Ant Design 图标：Ant Design 官方提供的大量图标
  • 自定义图标：通过阿里图标库引入的自定义图标

图标选择器

图标选择器是一个方便的 UI 组件，允许用户从多个分类中选择合适的图标。

基本使用方法

import IconSelect from '@/components/XinFormField/IconSelector';

function MyComponent() {
  const [icon, setIcon] = useState('');

  return (
    <IconSelect
      value={icon}
      onChange={setIcon}
      placeholder="请选择图标"
    />
  );
}

属性说明

属性 类型 说明 默认值
value string 当前选中的图标名称 -
onChange (value: string | null) => void 图标选择变化时的回调函数 -
placeholder string 选择框的占位符文本 "请选择图标"
disabled boolean 是否禁用 false
readonly boolean 是否只读 false

使用示例

基础用法：

<IconSelect
  value={selectedIcon}
  onChange={(value) => setSelectedIcon(value)}
  placeholder="选择一个图标"
/>

禁用状态：

<IconSelect
  value="HomeOutlined"
  onChange={() => {}}
  disabled={true}
  placeholder="这是一个禁用的图标选择器"
/>

图标分类

图标选择器将图标分为以下几类，便于用户查找：

  • 常用图标 (use)：日常开发中最常用的图标
  • 方向图标 (direction)：箭头、方向相关的图标
  • 建议图标 (suggestion)：提示、警告、确认等相关的图标
  • 编辑图标 (editor)：编辑器相关的图标
  • 数据图标 (data)：图表、数据展示相关的图标
  • Logo 图标 (logo)：各种品牌 Logo 图标
  • 其他图标 (other)：未归类的其他图标

直接使用图标

除了使用图标选择器，还可以直接使用 IconFont 组件来显示图标：

import IconFont from '@/components/IconFont';

// 使用 Ant Design 图标
<IconFont name="HomeOutlined" />

// 使用自定义图标
<IconFont name="icon-guanzhu" />

// 设置图标样式
<IconFont name="SettingFilled" style={{ fontSize: 24, color: '#1890ff' }} />

图标命名规范

  • Ant Design 图标的命名通常以 Outlined、Filled 或 TwoTone 结尾
  • 自定义图标的命名通常以 icon- 开头
  • 推荐使用语义化的图标名称，便于理解和维护

注意事项

  • 在使用图标时，请确保图标名称正确，否则会显示一个感叹号图标作为占位符
  • 图标选择器中的图标总数超过 1000 个，可以根据分类快速定位所需图标
  • 图标组件支持通过 style 属性设置样式，如大小、颜色等
ON THIS PAGE