图标 Icon 组件、Svg 组件、图标选择器组件
# Icon 组件
用于项目内组件的展示，基本支持所有图标库（支持按需加载，只打包所用到的图标）
icon 组件位于 src/components/Icon (opens new window) 内
提示
icon 的值可以在 Iconify (opens new window) 或 Netlify (opens new window) 上查询
# 使用
<template>
<Icon icon="gg:loadbar-doc"></Icon>
</template>
<script>
import { defineComponent } from 'vue';
import { Icon } from '/@/components/Icon';
export default defineComponent({
components: { Icon },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| icon | string | - | 图标名 |
| color | string | - | 图标颜色 |
| size | number | 16 | 图标大小 |
| prefix | string | - | 图标前缀 |
如果 icon 值以 ｜svg 结尾会自动使用SvgIcon组件
<template>
<Icon name="test|svg" />
</template>
<script>
import { defineComponent } from 'vue';
import { Icon } from '/@/components/Icon';
export default defineComponent({
components: { Icon },
});
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# SvgIcon 组件
# 使用
<template>
<div>
<SvgIcon name="test"> </SvgIcon>
</div>
</template>
<script>
import { SvgIcon } from '/@/components/Icon';
import { defineComponent } from 'vue';
export default defineComponent({
components: { SvgIcon },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | string | - | svg 图标名 |
| size | number | 16 | 图标大小 |
# Ant Design 图标
使用 ant-design-vue 提供的图标，从这里获取 Icon 图标 (opens new window)
v5.1.0 及之前版本：Antdv 2.x Icon 图标 (opens new window)
<template>
<StarOutlined />
<StarFilled />
<StarTwoTone twoToneColor="#eb2f96" />
</template>
<script>
import { defineComponent } from 'vue';
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
export default defineComponent({
components: { StarOutlined, StarFilled, StarTwoTone },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# IconPicker 图标选择器
# 使用
<template>
<div>
<IconPicker />
</div>
</template>
<script>
import { IconPicker } from '/@/components/Icon';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IconPicker },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | string | 100% | 宽度 |
| pageSize | number | 140 | 每页显示的图标数 |
| copy | boolean | false | 是否可以复制 |
| mode | string | iconify | 备选图标池，为 svg 时，会读取所有 svg sprite 图标。详见下方说明 |
mode 说明
mode为iconify时，会使用预生成的图标集数据作为备选图标池mode为svg时，会使用/src/assets/icons下的所有svg图标（可包含一级子目录）作为备选图标池，详见vite-plugin-svg-icons (opens new window)。
# 图标集预生成
由于图标选择器这个比较特殊的存在，项目会打包一些比较多的图标，图标选择器的图标需要事先指定并生成相应的文件。
# 图标集生成
- 执行图标生成命令
yarn gen:icon
1
- 这里会让你选择本地还是在线生成，两种方式各有利弊。如下图所示
local 表示本地，online 表示在线，回车确认
选择你要生成的图标集,回车确认
选择图标输出的目录(项目默认 src/components/Icon/data)，可以直接回车选择默认
到这里图标集已经生成完成了，此时你的图标选择器已经是你所选的的图标集的图标了。
注意不要频繁更新
如果前面选择的是本地生成的话，频繁更换图标集，可能会导致图标丢失或者显示不出来
# 优缺点
- 在线图标(项目默认,推荐)
该方式会在图标选择器使用到图标的时候进行在线请求,然后缓存对应的图标到浏览器。可以有效减少代码打包体积。
如果你的项目可以访问外网（开发环境）建议可以使用这种方式
缺点： 在局域网或者无法访问到外网的环境中图标显示不出来
- 本地图标
该方式会在打包的时候将图标选择器的图标全部打包到 js 内。在使用的时候不会额外的请求在线图标
缺点： 打包体积会偏大，具体的体积增加得看前面选择图标集的时候选择的图标数量的多少决定
