JeeSite 快速开发平台
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
  • 快速了解

  • 开发手册

  • Vue 开发手册

    • Vue 分离版本介绍
    • 快速开始、安装部署
    • 配置参数、主题配置
    • 前端权限、按钮权限
    • BasicForm 表单组件
    • BasicTable 表格组件
    • 源码解析、表单列表
    • 常用组件库、Hooks
    • 图标 Icon Svg 组件
      • Icon 组件
        • 使用
        • 属性
      • SvgIcon 组件
        • 使用
        • 属性
      • Ant Design 图标
      • IconPicker 图标选择器
        • 使用
        • 属性
        • 图标集预生成
        • 图标集生成
        • 优缺点
    • 国际化、多语言
    • Less CSS 样式库
    • 引入外部依赖
    • 分离版 ★ 常见问题 ★
  • 扩展功能专题

  • 云服务技术架构

  • 技术服务与支持

图标 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

# 属性

属性 类型 默认值 说明
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

# 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

# 属性

属性 类型 默认值 说明
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

# 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

# 属性

属性 类型 默认值 说明
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 内。在使用的时候不会额外的请求在线图标

缺点: 打包体积会偏大,具体的体积增加得看前面选择图标集的时候选择的图标数量的多少决定

进入 JeeSite 源码仓库页面,点击右上角 ⭐ Star 加星关注。

← 常用组件库、Hooks 国际化、多语言→

联系我们:s.jeesite.com  |  微信号:jeesitex  |  邮箱:jeesite@163.com
© 2013-2023 济南卓源软件有限公司 版权所有 | Theme Vdoing

关注 JeeSite 公众号,了解最新动态

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式