icon 图标组件

Icon

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

icon 组件位于 src/components/Icon

TIP

icon 的值可以在 IconifyNetlify 上查询

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

属性类型默认值说明
iconstring-图标名
colorstring-图标颜色
sizenumber16图标大小
prefixstring-图标前缀

提示

如果 icon 值以 |svg 结尾,则会渲染成 SvgIcon 组件

SvgIcon

用于使用项目 svg 雪碧图

Usage

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

Props

属性类型默认值说明
namestring-svg 图标名
sizenumber16图标大小

IconPicker

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

Usage

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

Props

属性类型默认值说明
widthstring100%宽度
pageSizenumber140每页显示的图标数
copybooleanfalse是否可以复制
modestringiconify备选图标池,为 svg 时,会读取所有 svg sprite 图标。详见下方说明

mode 说明

  • modeiconify时,会使用预生成的图标集数据作为备选图标池
  • modesvg时,会使用 /src/assets/icons 下的所有svg图标(可包含一级子目录)作为备选图标池,详见vite-plugin-svg-icons