Vue 3: 멋진 글꼴 아이콘 추가

기술 세부사항:
  • 우분투 22.04
  • VueJS 3
  • 멋진 글꼴
  • 타입스크립트

  • 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>
    


    결과



    좋은 웹페이지 즐겨찾기