element-plus neuestes SVGIcon-Symbol, neueste Gebrauchsanleitung

1: installieren

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

2: verwenden

Grundlegende Verwendung ( auch auf der offiziellen Element-Plus- Website erläutert): Sie können Komponenten global registrieren oder in einer einzelnen Komponente referenzieren. Für die globale Registrierung können Sie die globalen Registrierungskomponenten von vue3 anzeigen

<!-- 用 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>

globaler Einsatz

全局注册
// 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>

Wenn etwas nicht stimmt, können Sie es im Kommentarbereich darauf hinweisen. Dies ist nur meine eigene Verwendung und meine Gewohnheiten