2回答

Sunday

2021-11-30

回复 慕先生3223357：

你好：

element-plus 在 1.2.0 之后的版本中对 icons 进行了使用层面的修改，想要使用 icon 必须通过组件的形式进行导入

我不太理解你说的动态导入指的是什么意思。如果你希望全局导入来进行使用的话，那么可以按照以下方式导入并使用：

导入：

import * as icons from '@element-plus/icons'

const app = createApp(App)

Object.keys(icons).forEach((key) => {

  app.component(key, icons[key])

})

使用：

    <el-icon><add-location /></el-icon>

    <div style="font-size: 20px">

      <edit style="width: 22px; height: 22px; margin-right: 8px" />

      <share style="width: 1em; height: 1em; margin-right: 8px" />

      <delete style="width: 1em; height: 1em; margin-right: 8px" />

      <search style="width: 1em; height: 1em; margin-right: 8px" />

    </div>

效果：

1

3

阿阳2017

回复

慕先生3223357

通过动态组件渲染图标这个方法真是好啊。不过这种会直接将字符串el-icon-user渲染为组件，还需要将前缀el-icon-给提取出来。

2022-03-29

共3条回复

Sunday

2021-11-05

你好
Elementplus在1.2.0的版本中有一些破坏性的更新。具体可以看一下官网中icons组件的用法，需要单独下载@element-plus/icons 。或者使用和视频同样版本。

0

3

慕先生3223357

回复

Sunday

Font Icon的使用方式不再支持了，用class="icon" 并不能得到图标 el-icon标签的class 属性和icon属性都不能得到el-icon-user图标，必须得在el-icon标签内加入标签来使用图标，可是怎样才能动态的加入这个标签呢？学生学得粗浅，请老师指点迷津，以下是我从网上抄来的引入图标的方式，但怎样动态使用呢 const app = createApp(App) for (const name in ElIcons) { /* * 以elIcon为前缀的命名规则，是为了适配已经使用属性名添加图标的内置组件， */ app.component('elIcon' + name, ElIcons[name]) }

2021-11-30

共3条回复