在 Vue 3 中全局安装 Element Plus 图标
Posted
技术标签:
【中文标题】在 Vue 3 中全局安装 Element Plus 图标【英文标题】:Installing ElementPlus Icons globally on Vue 3 【发布时间】:2022-01-07 06:23:15 【问题描述】:我目前正在使用 Vue 3 和 Element Plus 进行项目
目前,我的应用上没有显示元素加图标。
我已经用纱线安装了它们
$ yarn add @element-plus/icons
我不知道下一步该做什么。
我已尝试将其导入到我的 main.ts 文件中。
import createApp from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "@element-plus/icons";
createApp(App).use(store).use(router).use(ElementPlus).mount("#app");
但它仍然没有显示..
希望有人能启发我。
谢谢
【问题讨论】:
【参考方案1】:@element-plus/icons
包包含在Icon Collection 中找到的每个图标的命名导出。例如,要使用MagicStick
图标,按名称导入,并将其注册为组件。在 Vue 3 中,您可以使用 <script setup>
块在本地注册组件,只需导入组件即可:
<script setup>
import MagicStick from '@element-plus/icons'
</script>
然后将其用作模板中的组件:
在<el-icon>
中,它可以让您轻松地将图标的大小和颜色指定为道具
注意:点击图标集合 UI 中的图标卡会自动将样板标记 (<el-icon><magic-stick/><el-icon>
) 复制到剪贴板,以便轻松将其粘贴到您自己的文件中。
或独立,这需要应用您自己的样式
<template>
<el-icon size="100"><MagicStick /></el-icon>
<!-- OR -->
<MagicStick class="icon" />
</template>
<style scoped>
.icon
color: #f00;
height: 200px;
</style>
demo
【讨论】:
以上是关于在 Vue 3 中全局安装 Element Plus 图标的主要内容,如果未能解决你的问题,请参考以下文章
vue-cli3.0安装element-ui组件及按需引入element-ui组件