[Component] [loading] Can't use element-plus icon with loading directive

[jiaqidegege]

Bug Type: Component

Environment

• Vue Version: 3.2.33
• Element Plus Version: 2.2.12
• Browser / OS: Chrome/100.0.4896.127/ MacOS 10.15.7
• Build Tool: Vite

Reproduction

Related Component

• el-loading

Reproduction Link

Element Plus Playground

Steps to reproduce

!

What is Expected?

use configured icon as loading icon

What is actually happening?

opposite

Additional comments

(empty)

[jiaqidegege]

Maybe it should allow pass component object to prop element-loading-svg.

[zydding]

我真服了你了，官方给的例子也不是你这么写的 看看这个

[jiaqidegege]

我真服了你了，官方给的例子也不是你这么写的 看看这个

看清楚，使用内置的图标， 像element一样，我都自己传svg标记，我要你这内置图标干啥

[zydding]

我真服了你了，官方给的例子也不是你这么写的 看看这个

看清楚，使用内置的图标， 像element一样，我都自己传svg标记，我要你这内置图标干啥

人家给你的例子了， 你不用，你买特斯拉要求能飞是吧？

[jiaqidegege]

element有这个功能，没用过不要说话

[wjw-gavin]

import { ElementPlus, Loading } from '@element-plus/icons-vue'

这里引入的是组件，使用方式是 <Loading />，你想用的应该是 @element-plus/icons-svg

[holazz]

这里只支持传入 svg，你可以使用这个包 @element-plus/icons-svg。或者在这里复制 svg 内容自己设置：

<script setup lang="ts">
import loading from '@element-plus/icons-svg/loading.svg?raw'

const svg = `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>`
</script>

<template>
  <div v-loading="true" class="box" :element-loading-svg="loading">sss</div>

  <div v-loading="true" class="box" :element-loading-svg="svg">sss</div>
</template>

[jiaqidegege]

这样也行，但是同时引入icon 的svg 和 组件包， 会导致包体积增大吧，是否有可能支持传入组件

[holazz]

这样也行，但是同时引入icon 的svg 和 组件包， 会导致包体积增大吧，是否有可能支持传入组件

为什么要同时引入呢？现在不支持传入组件

[jiaqidegege]

为了用裸svg, 要引入@element-plus/icons-svg, 项目里有图标需求又要引入@element-plus/icons-vue

[holazz]

为了用裸svg, 要引入@element-plus/icons-svg, 项目里有图标需求又要引入@element-plus/icons-vue

按需引入就好了，最后只会打包你用了的图标

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。