Icon 图标

字体或图片图标，对 el-icon 进行了二次封装，支持自定义多个字体图标库及自定义 SVG 图片图标颜色等扩展功能。

安装图标库

import { createApp } from "vue";
import ElementPlus from "element-plus";
import ElementPlusPro from "@easyui/element-plus-pro";
import "element-plus/dist/index.css";
import App from "./App.vue";

const app = createApp(App);
app.use(ElementPlus);
// 安装字体图标库，格式：{ [图标库前缀]: [文件地址] } 
app.use(ElementPlusPro, {
  iconSourceMap: {
    "icon": new URL("./assets/icons/iconfont1.js", import.meta.url).href,
    "test": new URL("./assets/icons/iconfont2.js", import.meta.url).href
  }
});
app.mount("#app");

基本用法

点击查看代码

<template>
  <s-icon name="smile" />
</template>

<script setup lang="ts">
</script>

图标前缀

点击查看代码

<template>
  <el-space style="padding: 5px;" :size="10">
    <s-icon name="smile" />

    <s-icon name="team" prefix="test" />
  </el-space>
</template>

<script setup lang="ts">
</script>

图片图标

点击查看代码

<template>
  <s-icon :imgSrc="iconSrc" color="#c45656" />
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const iconSrc = ref<string>(new URL("../../../assets/icons/pie-chart.svg", import.meta.url).href);
</script>

插槽自定义

点击查看代码

<template>
  <s-icon name="smile" />
</template>

<script setup lang="ts">
</script>

Props

Slots