在Vue 3上全局安装ElementPlus图标

Question

我目前正在使用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");

但它并没有继续显现。

Answer 1

@element-plus/icons包包含在图标集合中找到的每个图标的命名导出。例如，要使用MagicStick图标，请按名称导入它，并将其注册为组件。在Vue 3中，只需导入组件，就可以使用<script setup>块在本地注册组件：

<script setup>
import { MagicStick } from '@element-plus/icons-vue'
</script>

然后将其用作模板中的组件：

• 在<el-icon>中，可以轻松地将图标的大小和颜色指定为道具 注意:从(<el-icon><magic-stick/><el-icon>)中单击图标卡的会自动将样板标记复制到剪贴板上，以便轻松地将其粘贴到自己的文件中。

<template>
  <el-icon :size="100">
    <MagicStick />
  </el-icon>
</template>

• 或者是独立的，这需要应用您自己的样式：

<template>
  <MagicStick class="icon" />
</template>

<style scoped>
.icon {
  color: #f00;
  height: 200px;
}
</style>

演示