element-plus": "^1.2.0-beta.1"菜单图标不显示

Question

老师，安装的element-plus": "^1.2.0-beta.1"菜单图标不显示

Answer 1

Sunday 2021-11-30 14:41:13

回复 慕先生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>

效果：

• 慕先生3223357 #1

  知道怎么做了<el-icon v-if="icon.includes('el-icon')"><component :is="icon" /></el-icon>

• Sunday #2

  嗯嗯，通过动态组件也可以渲染

• 阿阳2017 回复 慕先生3223357 #3

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

Answer 2

Sunday 2021-11-05 07:25:06

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

• 慕先生3223357 #1

  那在这个项目中有什么办法用elementplus1.2.0版本的Icon呢？？？？，尤其是怎么样来动态加载呢

• Sunday 回复 慕先生3223357 #2

  1.2.0 中使用 icon 需要单独下载：
  $ yarn add @element-plus/icons
  # 或者
  $ npm install @element-plus/icons

• 慕先生3223357 回复 Sunday #3

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