# icon 圖標組件 [TOC] ## Icon 用于項目內組件的展示，基本支持所有圖標庫（支持按需加載，只打包所用到的圖標） icon 組件位于 [src/components/Icon](https://github.com/jeecgboot/jeecgboot-vue3/blob/master/src/components/Icon) 內 TIP icon 的值可以在 [Iconify](https://iconify.design/)或[Netlify](https://icones.netlify.app/collection/ant-design) 上查詢 ### 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` | \- | 圖標前綴 | 提示 如果`icon`值以`|svg`結尾，則會渲染成[SvgIcon 組件](https://vvbin.cn/doc-next/components/icon.html#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 | 屬性 | 類型 | 默認值 | 說明 | | --- | --- | --- | --- | | name | `string` | \- | svg 圖標名 | | size | `number` | 16 | 圖標大小 | ## IconPicker 本組件詳細說明請參閱 [圖標選擇器](圖標生成.md) ### 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 圖標。詳見下方說明 | mode 說明 * `mode`為`iconify`時，會使用預生成的 [圖標集數據](圖標生成.md) 作為備選圖標池 * `mode`為`svg`時，會使用`/src/assets/icons`下的所有svg圖標（可包含一級子目錄）作為備選圖標池，詳見 [vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md#vite-plugin-svg-icons)。