vue3项目搭建连载文章(8)-elementUI图标Icon库配置

问题描述

element ui plus 一些常用组件。 比如按钮。 都是自带图标属性。 但在实际常常会出现无法显示的情况。 以下就记录一下这个图标库的使用教程。 避免在使用的时候踩坑。

环境说明

本项目环境 信息如下:

{
  "name": "cron-vue3-plus",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@icon-park/vue-next": "^1.4.2",
    "element-plus": "^2.2.32",
    "pinia": "^2.0.32",
    "pinia-plugin-persist": "^1.0.0",
    "vue": "^3.2.45",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@types/node": "^18.14.6",
    "@vitejs/plugin-vue": "^4.0.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vue-tsc": "^1.0.24"
  }
}

• 依赖安装

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

• main.ts全局注册

import { createApp } from 'vue';
// 引入 element-plus UI框架
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ELIcons from '@element-plus/icons-vue';
import App from './App.vue';

const app = createApp(App);
for (const name in ELIcons) {
    app.component(name, (ELIcons as any)[name]);
}
app.use(ElementPlus).mount('#app');
 

• 使用案例

//直接饮引用图标
<el-icon><Plus /></el-icon>

//按钮组件中加图标。采用这种写法即可显示图标。
<el-button type="primary">
  <el-icon style="vertical-align: middle;">
    <search />
  </el-icon>
  <span style="vertical-align: middle;"> Search </span>
</el-button>

<el-icon :size="20">
 	<edit />
</el-icon>

// 按钮中使用
<el-button type="primary" :icon="Edit"></el-button>


//请注意， 这种写法icon显示不出来
<el-button type="primary" icon="el-icon-refresh"></el-button>