图标

图标来自独立包 @apollo-design/icons，与 @apollo-design/ui 分开安装与按需引入。它提供 848 个 图标：447 个 Outlined、251 个 Filled、150 个 TwoTone；完整目录见 图标资源页。

安装与引入

pnpm add @apollo-design/icons

<script setup lang="ts">
import { SearchOutlined } from '@apollo-design/icons';
</script>

<template>
  <SearchOutlined />
</template>

图标是普通 Vue 组件，颜色继承 currentColor，尺寸继承 font-size；也可以直接用 style / class 覆盖：

<template>
  <SearchOutlined style="font-size: 24px; color: #1677ff" />
  <SearchOutlined :rotate="90" />
  <SearchOutlined spin />
</template>

TwoTone 调色

TwoTone 图标支持 twoToneColor（单个图标）或 setTwoToneColor（全局）：

import { setTwoToneColor } from '@apollo-design/icons';

setTwoToneColor('#1677ff');

IconProvider

IconProvider 用来覆盖图标类名前缀，默认是 apollo-icon：

<template>
  <IconProvider :value="{ prefixCls: 'my-icon' }">
    <SearchOutlined />
  </IconProvider>
</template>

自定义图标

import { createIcon } from '@apollo-design/icons';

export const MyIcon = createIcon(
  {
    name: 'my-icon',
    theme: 'outlined',
    icon: {
      tag: 'svg',
      attrs: { viewBox: '0 0 24 24' },
      children: [{ tag: 'path', attrs: { d: 'M12 2 L22 22 L2 22 Z' } }],
    },
  },
  'MyIcon',
);

从 iconfont.cn 接入：

import { createFromIconfontCN } from '@apollo-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_xxx.js',
});

无障碍

图标默认通过 role="img" 语义输出。装饰性图标请加 aria-hidden="true"；承载语义的图标请提供 aria-label（或 ariaLabel prop），不要让读屏器去猜。