Vue 3: 멋진 글꼴 아이콘 추가
2484 단어 beginnersfontawesomevuetutorial
URL:
https://www.npmjs.com/package/@fortawesome/vue-fontawesome
https://fontawesome.com/icons
설치
귀하의 package.json
이렇게 생겼어야
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
다음 명령을 실행합니다(필요한 것보다 더 많을 수 있음).
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/vue-fontawesome@prerelease
main.js 업데이트
귀하의 src/main.ts
이렇게 생겼어야
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faTrashCan } from "@fortawesome/free-solid-svg-icons"; <--- Add any icons you need here
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
const app = createApp(App);
library.add(faTrashCan);
app.component("font-awesome-icon", FontAwesomeIcon);
app.use(createPinia());
app.use(router);
app.mount("#app");
용법
휴지통 아이콘을 사용하는 파일은 다음과 같습니다.
<template>
<div class="delete-item">
<slot id="id"><font-awesome-icon :icon="['fas', 'trash-can']" /></slot>
</div>
</template>
<style scoped>
.delete-item {
margin: 1rem;
padding: 0.5rem;
}
</style>
결과
Reference
이 문제에 관하여(Vue 3: 멋진 글꼴 아이콘 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/duhoang/vue-3-add-font-awsome-icons-4bc1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/vue-fontawesome@prerelease
귀하의
src/main.ts
이렇게 생겼어야import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faTrashCan } from "@fortawesome/free-solid-svg-icons"; <--- Add any icons you need here
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
const app = createApp(App);
library.add(faTrashCan);
app.component("font-awesome-icon", FontAwesomeIcon);
app.use(createPinia());
app.use(router);
app.mount("#app");
용법
휴지통 아이콘을 사용하는 파일은 다음과 같습니다.
<template>
<div class="delete-item">
<slot id="id"><font-awesome-icon :icon="['fas', 'trash-can']" /></slot>
</div>
</template>
<style scoped>
.delete-item {
margin: 1rem;
padding: 0.5rem;
}
</style>
결과
Reference
이 문제에 관하여(Vue 3: 멋진 글꼴 아이콘 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/duhoang/vue-3-add-font-awsome-icons-4bc1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<template>
<div class="delete-item">
<slot id="id"><font-awesome-icon :icon="['fas', 'trash-can']" /></slot>
</div>
</template>
<style scoped>
.delete-item {
margin: 1rem;
padding: 0.5rem;
}
</style>
Reference
이 문제에 관하여(Vue 3: 멋진 글꼴 아이콘 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/duhoang/vue-3-add-font-awsome-icons-4bc1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)