Element-plus图标不显示的解决办法

<el-input
        v-model="input2"
        class="w-50 m-2"
        placeholder="Type something"
        :prefix-icon="Search"
      />

安装官方的代码,不能显示出 search的图标;
解决办法:

1、安装

npm install @element-plus/icons-vue

2、main.js配置

// 导入所有的el-icon图标
import * as ElIconModules from '@element-plus/icons'

const app = createApp(App)
installElementPlus(app)
app.use(router).mount('#app')

// //  统一注册el-icon图标
for (const iconName in ElIconModules) {
  app.component(iconName, ElIconModules[iconName])
}

3、vue文件中使用插槽方式使用

<el-form-item>
          <el-input>
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </el-form-item>

结果如图:
在这里插入图片描述

### 关于Element Plus图标的使用方法、样式以及集成教程 #### 一、图标概述 Element Plus图标组件提供了丰富的矢量图形支持,这些图标可以被方便地应用于各种 UI 场景中。与旧版本的 Element UI 同,Element Plus 中的图标再是默认全部加载的形式,而是采用按需加载的方式[^3]。 #### 二、安装图标包 为了能够在项目里使用 Element Plus 提供的图标集合,开发者需要单独安装 `@element-plus/icons-vue` 这个 npm 包。通过命令行工具执行如下指令来完成安装操作: ```bash pnpm i @element-plus/icons-vue ``` 此过程会下载并配置好所需的资源文件以便后续调用[^2]。 #### 三、按需引入单个图标 当只需要个别特定样式的图标时,可以通过 ES6 导入语句直接指定所需项的名字来进行局部注册: ```javascript import { ElIcon, Setting as IconSetting } from 'element-plus'; // 或者对于 Vue 3 用户来说也可以这样写: import { defineComponent } from "vue"; export default defineComponent({ components: { ElIcon, IconSetting } }); ``` 这种方式仅减少了必要的网络请求开销,同时也让打包后的应用程序体积更加轻量化[^1]。 #### 四、全局注册所有图标推荐) 如果确实存在大量同类型的图标需求,则可以选择一次性将整个图标库都挂载至全局作用域内。过需要注意这样做可能会增加页面初次渲染的时间成本,因此除非必要否则应谨慎考虑这种方法。 ```javascript import * as Icons from '@element-plus/icons-vue'; const app = createApp(App); Object.keys(Icons).forEach(key => { app.component(key, Icons[key]); }) ``` 上述代码片段展示了如何遍历 `Icons` 对象并将其中每一个成员作为独立组件添加到应用实例当中去。 #### 五、样式调整 Element Plus 默认提供了一套简洁美观的基础样式给各个图标使用;然而有时候可能还需要进一步定制化外观效果。此时就可以借助 CSS 类名或者内联样式属性来自由修改颜色、大小等参数。例如设置某个具体图标的尺寸为 2em 并改变其填充色为红色: ```html <i class="el-icon-setting" style="font-size: 2em; color:red;"></i> <!-- 当然也支持绑定动态计算出来的值 --> <ElIcon :size="dynamicSizeValue" :color="currentColor"></ElIcon> ``` 此外还可以利用 LESS/SASS 变量覆盖机制实现更深层次的主题适配工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值