[Vue.js] fontawesome 사용하기

https://docs.fontawesome.com/web/use-with/vue
위의 링크를 참조하여 진행

1. npm 명령어로 라이브러리 설치

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome@3

위의 명령어를 실행하여 설치해준다.
free- 가 붙은 애들은 필수는 아니지만 처음에 안깔고 했다가 사용하다보니 필요해서 설치했다.

2. main.js 설정

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(fas);
library.add(far);

const app = createApp(App);
app.component("font-awesome-icon", FontAwesomeIcon);
app.mount("#app");

vue에서 사용할 수 있도록 main.js 파일에 코드를 입력한다.

3. vue에서 사용

<font-awesome-icon icon="fa-regular fa-square-check" /> 이런식으로 쓰면 됨

vue 파일에서 이런식으로 써주면 된다.

💡 참고로 적절하게 css를 커스터마이징해서 색상, 사이즈를 변경하여 사용할 수 있음!