在 Vue 3 上全局安装 ElementPlus Icons

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中找到的每个图标的命名导出。例如，要使用图标，请按名称导入它，并将其注册为组件。在 Vue 3 中，您可以通过导入组件来使用块在本地注册组件：MagicStick<script setup>

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

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

• inside <el-icon>，它可以让您轻松指定图标的大小和颜色作为 props

  注意：单击图标集 UI中的图标卡会自动将样板标记 ( <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>

演示