在 Vue 3 中全局安装 Element Plus 图标

Posted 2023-03-16

【中文标题】在 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 我不知道下一步该做什么。

我已尝试将其导入到我的 ma​​in.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