# icon 图标组件

## 代码演示

<CodePreview src="/doc-feat/icon" :height="800">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="Icon组件示例">
    <CollapseContainer title="Antv Icon使用 (自动按需引入，直接使用图标组件即可)">
      <div class="flex justify-around">
        <GithubFilled :style="{ fontSize: '30px' }" />
        <QqCircleFilled :style="{ fontSize: '30px' }" />
        <WechatFilled :style="{ fontSize: '30px' }" />
        <AlipayCircleFilled :style="{ fontSize: '30px' }" />
        <IeCircleFilled :style="{ fontSize: '30px' }" />
        <TaobaoCircleFilled :style="{ fontSize: '30px' }" />
        <CodepenCircleFilled :style="{ fontSize: '30px' }" />
      </div>
    </CollapseContainer>

    <CollapseContainer title="IconIfy 组件使用" class="my-5">
      <div class="flex justify-around flex-wrap">
        <Icon icon="ion:layers-outline" :size="30" />
        <Icon icon="ion:bar-chart-outline" :size="30" />
        <Icon icon="ion:tv-outline" :size="30" />
        <Icon icon="ion:settings-outline" :size="30" />
      </div>
    </CollapseContainer>

    <CollapseContainer title="svg 雪碧图" class="my-5">
      <div class="flex justify-around flex-wrap">
        <SvgIcon icon="test" size="32" />
        <template v-for="item in 6" :key="item">
          <SvgIcon :icon="`dynamic-avatar-${item}`" size="32" />
        </template>
      </div>
    </CollapseContainer>

    <CollapseContainer title="图标选择器(Iconify)" class="my-5">
      <div class="flex justify-around flex-wrap">
        <IconPicker copy />
      </div>
    </CollapseContainer>

    <CollapseContainer title="图标选择器(Svg)" class="my-5">
      <div class="flex justify-around flex-wrap">
        <IconPicker mode="svg" copy />
      </div>
    </CollapseContainer>

    <AAlert
      show-icon
      message="推荐使用Iconify组件"
      description="Icon组件基本包含所有的图标,在下面网址内你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。"
    />
    <a-button type="link" @click="toIconify"> Iconify 图标大全 </a-button>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@eciol/ant-ui';
  import { CollapseContainer, Icon, IconPicker, SvgIcon } from '@eciol/share-ui';
  import { openWindow } from '@eciol/shared';

  const toIconify = () => {
    openWindow('https://iconify.design/');
  };
</script>

```
</details>
</CodePreview>

## Icon

用于项目内组件的展示，基本支持所有图标库（支持按需加载，只打包所用到的图标）

icon 组件位于 [packages/ui/share-ui/src/icon](http://192.168.9.192/eci-frontend/base-framework/-/blob/main/packages/ui/share-ui/src/icon/index.vue) 内

::: tip

icon 的值可以在 [Iconify](https://iconify.design) 或 [Netlify](https://icones.netlify.app/collection/ant-design) 上查询

:::

### Usage

```vue
<template>
  <Icon icon="gg:loadbar-doc"></Icon>
</template>

<script setup lang="ts">
  import { Icon } from '@eciol/share-ui';
</script>
```

### Props

| 属性       | 类型     | 默认值  | 说明        |
| ------    | -------- | ------ | --------   |
| icon      | `string` | -      | 图标名      |
| color     | `string` | -      | 图标颜色    |
| size      | `number` | 16     | 图标大小    |
| namespace | `string` | -      | 图标集空间名 |
| hoverable | `boolean` | false | 是否可划过高亮 |

## SvgIcon

用于使用项目 svg 雪碧图

### Usage

```vue
<template>
  <div>
    <SvgIcon icon="test"> </SvgIcon>
  </div>
</template>
<script>
  import { SvgIcon } from '@eciol/share-ui';
</script>
```

### Props

| 属性 | 类型     | 默认值 | 说明       |
| ---- | -------- | ------ | ---------- |
| name | `string` | -      | svg 图标名 |
| size | `number` | 16     | 图标大小   |
| namespace | `string` | -      | 图标集空间名 |
| hoverable | `boolean` | false | 是否可划过高亮 |
<!-- 
## IconPicker

本组件详细说明请参阅[图标选择器](../dep/icon.html#图标选择器)

### Usage

```vue
<template>
  <div>
    <IconPicker />
  </div>
</template>
<script>
  import { IconPicker } from '/@/components/Icon';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: { IconPicker },
  });
</script>
```

### Props

| 属性     | 类型      | 默认值    | 说明                                          |
| -------- | --------- | --------- | --------------------------------------------- |
| width    | `string`  | 100%      | 宽度                                          |
| pageSize | `number`  | 140       | 每页显示的图标数                              |
| copy     | `boolean` | false     | 是否可以复制                                  |
| mode     | `string`  | `iconify` | 备选图标池，为 svg 时，会读取所有 svg sprite 图标。详见下方说明 |


::: tip mode 说明

- `mode`为`iconify`时，会使用预生成的[图标集数据](../dep/icon.html#图标集预生成)作为备选图标池
- `mode`为`svg`时，会使用 `/src/assets/icons` 下的所有svg图标（可包含一级子目录）作为备选图标池，详见[vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md#vite-plugin-svg-icons)。

::: -->