Глобальная установка значков ElementPlus на Vue 3

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

The @element-plus/iconspackage содержит именованные экспорты для каждого значка, найденного в коллекции значков. Например, чтобы использовать MagicStickзначок, импортируйте его по имени и зарегистрируйте как компонент. В Vue 3 вы можете использовать <script setup>block для локальной регистрации компонента, просто импортировав компонент:

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

Затем используйте его как компонент в своем шаблоне:

• в пределах <el-icon>, что позволяет легко указать размер и цвет значка в качестве реквизита.

  Примечание. Если щелкнуть карточку значка в пользовательском интерфейсе коллекции значков, автоматически копируется стандартная разметка ( <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>

демо