虽然可以使用第三方图标，但是风格规范就不一样了。这类图标希望可以成对出现，类似的view图标可以有个viewInvisible用于密码框切换

Uncaught (in promise) TypeError: (0 , vue_reactivity__WEBPACK_IMPORTED_MODULE_1_.track)(...) is not a function

安装引入都没有问题，在尝试在页面使用时，会出现此错误，未引用不会出现错误。
版本："@element-plus/icons-vue": "^2.1.0",

<template>
<div>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-button type="primary">
        <el-icon><Plus /></el-icon>
        添加组
      </el-button>

    </el-col>
    <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
</div>
</template>
<script setup>
import { Plus } from '@element-plus/icons-vue'

</script>

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(store).use(router).use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#app')

目前采用的方式没有通过npm，单个为vue文件引入是没问题的，是否可以直接cdn引入呢？

类似上图这种，在以前用 font icon 的时候，通过 https://github.com/ElemeFE/element/blob/dev/examples/icon.json 这个文件的数据，可以快速渲染出全部 icon ，现在用 svg icon 的话，是否也可以提供一份 json 清单，至少可以通过这个清单渲染出全部 svg icon

2.2.0没有打包TS声明文件

Existing Component

Yes

Component Name

el-icon

Description

没看到常见的 like（点赞）图标，能否加上这个图标？

https://www.npmjs.com/package/@element-plus/icons

按需引入这种错误如何解决

Existing Component

否

Component Name

full-screen

Description

为啥有全屏图标，却没有退出全屏的图标呢？？

图标需要新增一个自定义props, 参试修改packages\vue\build\generate.ts

...
<script lang="ts">
import type { DefineComponent } from 'vue'
export default ({
  props:{data:String}, //新增
  name: "${componentName}",
}) as DefineComponent
</script>`
....

执行打包报错，输出src\components\qianggua.vue

<script lang="ts">
import type { DefineComponent } from 'vue'
export default {
  props: { data: String },
  name: 'Qiangua',
} as DefineComponent
</script>

生成代码可在 https://sfc.vuejs.org/ 运行。

// 更改导出 结果 正常
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Qiangua',
  props: {
    data:String,
  },
})
</script>

Hai @JeremyWuuuuu
Currently I'm upgrading from element plus 1.1.0-beta.24 to 1.2.0-beta.3

I because now all icon use svg icon, I have some breaking change

I have some button on my page like this (of course the button on the template and import on the script tag)

<el-button icon="el-icon-plus">Create</el-button>

and after upgrading the structure will be like this

<el-button :icon="Plus">Create</el-button>

import { Plus } from '@element-plus/icons'

For one page this is worth it, but for upgrading hundred page is very hard

My idea is use global component, so we not import on every page, and for icon="el-icon-plus" I can replace on vs code with :icon="Plus"
I try to use it on global component but not working

import { Plus } from '@element-plus/icons'
export default function (app) {
    app.component(Plus)
}

Can you help me

由于pnpm的结构树，包内无法直接引用，导致vite启动报错

el-menu下 图标使用Setting导致菜单折叠卡顿

无法识别到types路径

如题。

如题，
比如：

<el-icon class="hello"><user /></el-icon>

编译后：

<i class="hello hello"><svg>...</svg></i>

图标集合 里面的图标不止 293个。
但是iconify ep的图标并没有更新。
跪求相关人员更新下。

官方说明文档是 0.0.11版本的，说明操作，图标显示不了。

希望提供新版本的使用说明。

还有一个问题，npmjs.com 最后一个版本是 v0.0.11，但是 Releases 里已经有 v0.2.4 了

构建时报错 @charset

unplugin-icons

This is my code, rendering a close icon. However, attributes cannot be inherited correctly .
<el-icon :size="10" color="blue"> <ElIconClose /> </el-icon>

If I change it to the following it will work fine.

build.ts中代码用vite打包该如何配置

pnpm : 7.0.0-rc.2,
node: v16.14.2,
执行 pnpm build,

> @element-plus/[email protected] build D:\workspace\element-plus-icons\packages\vue
> pnpm run build:generate && pnpm run build:build && pnpm run build:types

> esno build/generate.ts

i generating vue components                                                                                                          13:15:11  
d:\workspace\element-plus-icons\packages\vue\build\generate.ts:14
  const { rootPath } = await getPackageInfo('@element-plus/icons-svg')
          ^

TypeError: Cannot destructure property 'rootPath' of '(intermediate value)' as it is undefined.
    at null.getSvgFiles (d:\workspace\element-plus-icons\packages\vue\build\generate.ts:14:11)
    at null.<anonymous> (d:\workspace\element-plus-icons\packages\vue\build\generate.ts:68:17)

Bug Type: Component

Environment

• Vue Version: 3.2.36
• Element Plus Version: 2.2.2
• Browser / OS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36
• Build Tool: Webpack

Reproduction

Related Component

• el-icon

Reproduction Link

Element Plus Playground

Steps to reproduce

Try to import the "Left" icon from the set.

What is Expected?

A "Left" icon should exist.

What is actually happening?

No exist error

Additional comments

There is an icon for Top, TopRight, Top Left, Right, Bottom, BottomRight, BottomLeft but no icon just for "Left".

发布在unpkg上的路径多了一个fonts
/dist/fonts/fonts/element-icons.woff

我遇到el-menu卡顿问题，搜索发现别人写的文章：https://frontend.devrank.cn/traffic-information/7282345623976986684
验证后发现确实跟图标相关。比如我用setting有问题，改成tools就没问题。

I don't use the @element-plus/icons-vue package in my files, this package uses element-plus.
Can you tell me, maybe I'm doing something wrong?

@element-plus/icons deprecated ?????

const icon = 'Menu'
await import('@element-plus/icons-vue/' + icon)
类似这种用法，unplugin-icons好像只能按照字符串字面量导入

新建的空项目, 再button上使用Search等图标的时候, 会提示Search有问题, 代码运行起来样式没问题, 仅仅是个 警告

import {Search} from '@element-plus/icons-vue'

  <div>
    <el-button :icon="Search" circle/>
  </div>

Type DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}> is not assignable to type string | Component

  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "element-plus": "^2.3.8",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vue-tsc": "^1.2.0"
  }

在使用中一旦使Search图标项目就会出错createForOfIteratorHelper.js?b85c:3 Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

el-icon works fine.
but when use in el-button :icon, Icon does not display

version

"@element-plus/icons-vue": "^1.1.4",
"element-plus": "^1.0.2-beta.45",
"vue": "^3.0.5"

error log

[vite] error while updating dependencies:
Error: Build failed with 565 errors:
node_modules/@element-plus/icons-vue/dist/es/add-location.mjs:1:37: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "createElementBlock"
node_modules/@element-plus/icons-vue/dist/es/add-location.mjs:1:57: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "createElementVNode"
node_modules/@element-plus/icons-vue/dist/es/aim.mjs:1:37: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "createElementBlock"
node_modules/@element-plus/icons-vue/dist/es/aim.mjs:1:57: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "createElementVNode"
node_modules/@element-plus/icons-vue/dist/es/alarm-clock.mjs:1:37: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "createElementBlock"

在npm中的@element-plus/icons-vue包无法被vite treeshake。打包后，会把全部icon都打入包中。

反而是被标为deprecated的@element-plus/icons包可以被treeshake。

版本

• @element-plus/icons-vue: 2.0.0
• @element-plus/icons: 0.0.11
• vite: 2.9.9

复现

直接从node_modules中的文件就能看出区别。

1. pnpm create vite创建一个vite vue-ts项目
2. 进入目录
3. pnpm i @element-plus/icons @element-plus/icons-vue
4. 找个地方使用icon(要实际使用，只import的话会被整个treeshake)
5. pnpm build

可以发现从不同的包引用icon时，输出文件的大小有区别(53KB vs 255KB)。
输出文件中http://www.w3.org/2000/svg字符串的出现数目也能说明问题。

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

element-plus-best-practices
如此例，在App.vue 檢視時如資料寬度超過視窗寬度，會看不見後面的資料

一直有在根据 element-plus-icons 学习搭建自己的 icons 依赖库，发现以前 element-plus-icons 一直是由 rollup 构建的，然后好像现在换成了 esbuild 构建的，这样好像对于按需引入似乎不太友好？请问这是出于什么样的原因呢？