图标 Icon 组件、Svg 组件、图标选择器组件
# Icon 组件
用于项目内组件的展示，基本支持所有图标库（支持按需加载，只打包所用到的图标）
icon 组件位于 src/components/Icon (opens new window) 内
提示
icon 的值可以在 Iconify (opens new window) 或 Netlify (opens new window) 上查询
v5.7.0 开始使用 @unocss/presets-icons (opens new window) 它提供了，在纯 CSS 中按需使用任何图标的能力。
# 使用
<template>
<!-- 5.7.0+ 使用 i- 开头，使用 iconify 图标集 -->
<Icon icon="i-gg:loadbar-doc" />
<Icon icon="i-ph-anchor-simple-thin" />
<Icon icon="i-mdi-alarm text-orange-400" />
<Icon icon="i-logos-vue text-3xl" />
<Icon icon="i-carbon-sun dark:i-carbon-moon" />
<Icon icon="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />
<!-- 读取 /src/assets/icons 下的 svg -->
<Icon icon="i-svg:sun" />
<!-- 读取 /public/resource/img 下的图片，直接写图片相对路径 -->
<Icon icon="icons/dynamic-avatar-1.svg" size="28" />
<!-- 5.6.1 及之前版本 -->
<Icon icon="gg:loadbar-doc" />
<!-- 读取 /src/assets/icons 下的 svg，以 `|svg` 结尾会自动使用`SvgIcon`组件 -->
<Icon name="test|svg" />
</template>
<script>
import { defineComponent } from 'vue';
import { Icon } from '/@/components/Icon';
export default defineComponent({
components: { Icon },
});
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| icon | string | - | 图标名 |
| color | string | - | 图标颜色 |
| size | number | 16 | 图标大小 |
| prefix | string | - | 图标前缀（5.7.0已删除） |
# SvgIcon 组件
自动加载 /src/assets/icons 下的 svg 文件
v5.7.0 中已弃用，可直接通过 i-svg:sun 读取
# 使用
<template>
<div>
<SvgIcon name="sun" />
</div>
</template>
<script>
import { SvgIcon } from '/@/components/Icon';
import { defineComponent } from 'vue';
export default defineComponent({
components: { SvgIcon },
});
</script>
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.7.0+ 版本建议直接使用
i-ant-design:前缀调用图标 - v5.6.1 及之前版本，建议直接使用
ant-design:前缀调用图标 - 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>
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>
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 说明
- 在 v5.7.0+ 已弃用，使用 presets-icons 替代
mode为iconify时，会使用预生成的图标集数据作为备选图标池mode为svg时，会使用/src/assets/icons下的所有svg图标（可包含一级子目录）作为备选图标池，详见vite-plugin-svg-icons (opens new window)。
# 图标集预生成
由于图标选择器这个比较特殊的存在，项目会打包一些比较多的图标，图标选择器的图标需要事先指定并生成相应的文件。
# 图标集生成
- 执行图标生成命令
yarn gen:icon
选择您要生成的图标集,回车确认
选择图标输出的目录(项目默认 src/components/Icon/src)，可以直接回车选择默认
到这里图标集已经生成完成了，此时您的图标选择器已经是您所选的的图标集的图标了。
# 优缺点
JeeSite 平台默认使用本地图标，打包时 vite 根据使用情况生成图标集。
- 在线图标(项目默认,推荐)
该方式会在图标选择器使用到图标的时候进行在线请求,然后缓存对应的图标到浏览器。可以有效减少代码打包体积。
如果您的项目可以访问外网（开发环境）建议可以使用这种方式
缺点： 在局域网或者无法访问到外网的环境中图标显示不出来
- 本地图标
该方式会在打包的时候将图标选择器的图标全部打包到 js 内。在使用的时候不会额外的请求在线图标
缺点： 打包体积会偏大，具体的体积增加得看前面选择图标集的时候选择的图标数量的多少决定
