Element Plus Leafer

Appearance

Icon 图标 ​

基础用法 ​

icon 可以传入一个图片路径，或者 SVG 的字符串。

TIP

只有当传入 SVG 字符串时，color 才会生效。在 Vite 项目中，以 ?raw 后缀引入可以获取文件字符串。

ts
import Edit from '@element-plus/icons-svg/edit.svg'; 
import Edit from '@element-plus/icons-svg/edit.svg?raw';

设置 loading，你的图标就可以在 2 秒内旋转 360 度。

查看源代码
vue
<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { Flow } from '@leafer-in/flow';
  import { ElIcon } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';
  import Edit from '@element-plus/icons-svg/edit.svg?raw';
  import Share from '@element-plus/icons-svg/share.svg?raw';
  import Delete from '@element-plus/icons-svg/delete.svg?raw';
  import Loading from '@element-plus/icons-svg/loading.svg?raw';
  import Search from '@element-plus/icons-svg/search.svg?raw';

  const container = ref();

  onMounted(() => {
    const leafer = new Leafer({
      view: container.value,
      type: 'block',
    });

    const icon1 = new ElIcon({ icon: Edit, size: 20 });
    const icon2 = new ElIcon({ icon: Share, color: '#409efc', size: 20 });
    const icon3 = new ElIcon({ icon: Delete, size: 20 });
    const icon4 = new ElIcon({ icon: Loading, size: 20, loading: true });
    const icon5 = new ElIcon({ icon: Search, size: 20 });

    const flow = new Flow({
      gap: 10,
      children: [icon1, icon2, icon3, icon4, icon5],
    });

    leafer.add(flow);
    leafer.height = leafer.renderBounds.height;
  });
</script>

图标集合 ​

推荐使用 Element Plus 的官方图标，原始 SVG 文件请安装 @element-plus/icons-svg。

Icon Props ​

属性名说明类型默认值
icon图标string—
colorSVG 的颜色string—
sizeSVG 的尺寸number—
loading是否旋转booleanfalse