vue3之图标的引入

图标的引入

1、引入管理包

npm install @element-plus/icons-vue

2、实际应用

main.js

//导入【所有的图标】
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

//使用图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.mount('#app')

login.vue

<template>
    ....
	<el-form-item class="userInp" >
		<el-input v-model="form.username" placeholder="请输入用户名">
    		<!-- 图标 -->
    		// #prefix：前缀; #suffix：后缀。
        	<template #prefix>
        		<el-icon><search /></el-icon>
        	</template>
		</el-input>
	</el-form-item>
    ....
</template>

3、图标的选择与修改

在官网中选择图标，点击即可，会自动复制

将template中的内容更换掉即可

<template>
    ....
	<el-form-item class="userInp" >
		<el-input v-model="form.username" placeholder="请输入用户名">
    		<!-- 图标 -->
    		// #prefix：前缀; #suffix：后缀。
        	<template #prefix>
        		<el-icon><User /></el-icon>
        	</template>
		</el-input>
	</el-form-item>
    ....
</template>