import{o as n,c as a,a as s}from"./app.51e46c58.js";const t='{"title":"Icon 图标组件","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":3,"title":"基本用法","slug":"基本用法"},{"level":3,"title":"useIcon","slug":"useicon"},{"level":2,"title":"Icon 属性","slug":"icon-属性"}],"relativePath":"components/icon.md","lastUpdated":1721205967753}',o={},p=s('

Icon 图标组件

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

Icon 组件位于 src/components/Icon 内

TIP

在 Iconify 上，你可以查询到你想要的所有图标并使用，不管是不是 element-plus 的图标库。

用法

基本用法

如果以svg-icon: 开头，则会在本地中找到该 svg 图标，否则，会加载 Iconify 图标。

<template>\n  <!-- 加载本地 svg -->\n  <Icon icon="svg-icon:peoples" />\n\n  <!-- 加载 Iconify -->\n  <Icon icon="ep:aim" />\n</template>\n\n

useIcon

如果需要在其他组件中如 ElButton 传入 icon 属性，可以使用 useIcon

<script setup lang="ts">\nimport { useIcon } from '@/hooks/web/useIcon'\nimport { ElButton } from 'element-plus'\n\nconst icon = useIcon({ icon: 'svg-icon:save' })\n</script>\n\n<template>\n  <ElButton :icon="icon"> button </ElButton>\n</template>\n

参数介绍

const icon = useIcon(props)\n

props

详见

Icon 属性

属性说明类型可选值默认值
icon图标名string--
color图标颜色string--
size图标大小number-16
hoverColorhover颜色string--
',17);o.render=function(s,t,o,e,c,l){return n(),a("div",null,[p])};export default o;export{t as __pageData};