element-plus 最新SvgIcon图标最新使用指南

1：安装

yarn add @element-plus/icons
或者
npm install @element-plus/icons

2： 使用

基础用法（element-plus官网也有说明），可以全局注册组件或者在单个组件中引用，全局注册可以查看vue3全局注册组件

<!-- 用 el-icon 为 SVG 提供属性 -->
// 添加is-loading可以看到图标旋转了起来，但是应该只能在le-icon标签中使用，直接使用在图标组件中无效
<el-icon :size="size" :color="color is-loading">
  <edit />
</el-icon>
<!-- 或者单独使用，不从祖先节点继承任何属性 -->
<edit />

<script lang="ts">
  import { Edit } from '@element-plus/icons'

  export default defineComponent({
    components: {
      // 全名
      [Edit.name]: Edit,
      // 或者以缩写的方式,
      Edit,
    },
  })
</script>

全局使用

全局注册
// main.js
import * as ElementIcon from '@element-plus/icons'
const App = createApp(app)
for(const icon in ElementIcon) {
    App.component(icon, ElementIcon[icon])
}
使用：
一： 直接使用组件名称
<template>
	<Calendar />
	或者
	<el-icon class="is-loading">  // 使用标签可以加is-loading 实现旋转
        <Calendar />
    </el-icon>
</template>
二： 在el-input中使用
<el-input prefix-icon="Lock"></el-input>  // 在el-input中使用不需要加：并且名字需要跟在main.js中的一致
使用阿里矢量图标时建议在template 中使用
<el-input prefix-icon="Lock">
	<template #suffix>
		<i class="iconfont icon-eyeOpen"></i>
	</template>
</el-input>

存在不对的地方，可在评论区指出来，这里只是本人自己的使用方法跟习惯