vue3项目使用Element Plus icon库：统一导入、全局注册组件

尝试使用Element Plus提供的icon，记录一下在安装和使用中遇到的问题
前排注意，从1.2.0-beta.1版本开始不再包含Font Icon

下载

npm install @element-plus/icons-vue

如果下载较慢可以使用淘宝镜像

npm install @element-plus/icons-vue --registry https://registry.npm.taobao.org

注册组件

下载完成后，需要注册组件，才可以使用
可以全局注册，也可以在要用到的组件里单独注册；在全局注册时，既可以统一导入，也可以逐个按需注册
这里主要介绍全局注册

逐个注册

// main.js
import { Edit, Delete } from '@element-plus/icons-vue'
const app = createApp(app)
app.component('edit', Edit)
app.component('delete', Delete)
app.mount('#app')

统一导入

// main.js
import * as ELIcons from '@element-plus/icons-vue'
const app = createApp(app)
for (let iconName in ELIcons) {
	app.component(iconName, ELIcons[iconName])
}	
app.mount('#app')

使用

注册之后的icon可以直接在HTML标签里使用，也可以和el-icon组合使用，后者可以设置icon的大小和颜色属性

直接使用
由于svg icons默认不携带任何属性，所以属性需要直接添加

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

结合el-icon
color属性是svg的fill颜色，size属性是图标大小
通过添加额外的类名is-loading，可以让图标在2秒内旋转360度，动画效果也可以自己改写

<div>
	<el-icon :size="20" color="#409EFC">
		<edit />
	</el-icon>
	<el-icon class="is-loading" style="vertical-align: middle;">
		<loading />
	</el-icon>		
</div>

参考资料
Element Plus官方文档：https://element-plus.gitee.io/zh-CN/component/icon.html#icon-slots
el-icon 最新使用指南：https://blog.csdn.net/alloom/article/details/119415984