Icon 图标

基于 ElIcon + iconfont 封装，统一 Element Plus 图标和自定义图标的用法。

基础用法

<template>
  <div>
    <div>
      <p>element plus icons</p>
      <MIcon name="IconHomeFilled"></MIcon>
      <MIcon name="icon-cpu"></MIcon>
      <MIcon name="icon-menu"></MIcon>
      <MIcon name="icon-setting"></MIcon>
    </div>
    <div>
      <p>iconfont</p>
      <MIcon name="iconfont-dianzan" color="#ff7f50"></MIcon>
      <MIcon name="iconfont-pinglun" :size="25"></MIcon>
      <MIcon name="iconfont-gengduo"></MIcon>
      <MIcon name="IconfontShoucang"></MIcon>
      <MIcon name="IconfontShoucang">slot</MIcon>
    </div>

    <MMarkdownView :value="readme"></MMarkdownView>
  </div>
</template>

<script setup lang="ts">
import readme from '@/components/icon/README.md?raw'
</script>

<style lang="scss" scoped>
:deep(.m-icon) {
  margin-right: 15px;
}
</style>

API

Icon 属性

属性名	说明	类型	默认值
size	图标大小	number	继承
color	图标颜色	string	—
name	图标名称，icon- 开头为 EP 图标，iconfont- 开头为 iconfont	string	—

Icon 插槽

插槽名	说明
default	自定义默认内容