Skip to content

icon 图标组件

Icon

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

icon 组件位于 src/components/Icon 内

Usage

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

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

Props

属性	类型	默认值	说明
icon	`string`	-	图标名
color	`string`	-	图标颜色
size	`number`	16	图标大小
prefix	`string`	-	图标前缀

SvgIcon

用于使用项目 svg 雪碧图

Usage

<template>
  <div>
    <SvgIcon name="test"> </SvgIcon>
  </div>
</template>
<script>
  import { SvgIcon } from '/@/components/Icon/Icon.vue';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: { SvgIcon },
  });
</script>

Props

属性	类型	默认值	说明
name	`string`	-	svg 图标名
size	`number`	16	图标大小

IconPicker

本组件详细说明请参阅图标选择器

Usage

<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 图标。详见下方说明