elementUi icon有时乱码

1.将"sass" ->1.39.0

2.vue.config.js添加配置

module.exports = {
	...
	css: {
	    loaderOptions: {
	      scss: { 
	        sassOptions: { outputStyle: 'expanded' } // fix: 解决 element-ui 图标 icon 偶现乱码问题
	      }
	    }
	  },
	  ...
}

出现 DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

	参考:https://sass-lang.com/documentation/breaking-changes/slash-div/
	执行以下命令:
	$ npm install -g sass-migrator
	$ sass-migrator division **/*.scss
### 如何在项目中引入 ElementUI 图标 #### 在 Vue 2 中引入 ElementUI 图标 对于基于 Vue 2 的项目,可以直接利用内置于 Element UI 库中的图标集。这意味着无需额外安装任何其他包即可访问这些图标。 为了使用 `ElementUI` 的图标组件,可以通过 `<i>` HTML 标签配合相应的 CSS 类名实现图标的渲染。例如,如果希望呈现一个“设置”的图标,则可采用如下方式: ```html <i class="el-icon-setting"></i> ``` 当需要把图标嵌入到按钮之中时,可以联合运用 `el-button` 组件完成这一需求: ```html <el-button type="primary" icon="el-icon-search">搜索</el-button> [^1] ``` 此外,确保已正确导入了 Element UI 及其样式文件以便上述代码能够正常运作[^4]。 #### 在 Vue 3 中引入 Element Plus 图标 由于官方不再维护针对 Vue 3 版本的 Element UI 支持,因此推荐转向使用 **Element Plus** —— 这是专门为 Vue 3 设计的一套全新前端框架组件库。它同样提供了丰富的图标资源供开发者调用。 同理,在 Vue 3 下也可以通过类似的语法结构来加载所需图标: ```html <i class="ep-icon-setting"></i> <!-- 或者 --> <el-button type="primary" :icon="Search">搜索</el-button> <script setup> import { Search } from '@element-plus/icons-vue' </script> ``` 这里需要注意的是,不同于 Vue 2, 对于某些特定场景下的图标应用可能涉及到 ES Module 形式的按需加载模式。 #### 解决常见错误提示 有时可能会遇到类似于 `'element-ui/lib/theme-chalk/index.css' not found` 的警告信息。这通常是由于路径配置不当或者缺少必要的依赖项所引起的。建议检查项目的构建工具配置以及确认所有必需的 npm/yarn 包都已经被成功安装到位[^2]。 #### 添加自定义图标至项目 除了使用默认提供的图标外,还可以借助 Iconfont 平台轻松集成更多个性化的图形素材。具体操作流程为登录 Iconfont 官网并挑选心仪的图标;接着切换至 “Font Class” 模式获取对应的类名;最后按照常规方法将其应用于页面布局当中即可[^3]。 ```css /* 假设选择了名为 'my-custom-icon' 的自定义图标 */ .i-my-custom { font-family: "iconfont"; content: "\e600"; /* Unicode 编码 */ } ``` ```html <i class="i-my-custom"></i> ``` 以上就是关于如何在不同版本的 Vue.js 项目环境中有效引入和使用 Element (Plus) UI 图标的详细介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值