Nuxt.js와 Chakra UI Vue로 개인 프로젝트를 작업할 때 FontAwesome 아이콘을 사용하고 싶었습니다. Nuxt.js 프로젝트 내 Chakra UI Vue에서 아이콘이 작동하도록 하기 위해 약간의 노력을 기울였습니다. Nuxt.config.js 객체가 일반 Vue.config.js 객체와 약간 다르게 보이기 때문입니다.

시작하기 🏃‍♂️

이 작은 블로그는 Nuxt.js 및 Chakra UI Vue에 관한 것입니다. 즉, 새로운 Nuxt.js 프로젝트를 만드는 것부터 시작해야 합니다.

create-nuxt-app 을 사용하여 빠르게 시작하겠습니다.

npx create-nuxt-app <my-project>

터미널 내부에서 몇 가지 질문에 답해야 합니다. 정말 중요한 유일한 것은 Chakra UI 옵션을 선택한다는 것입니다.



개인적으로 Yarn을 '패키지 관리자'로 선택했지만 원하는 것을 자유롭게 선택하십시오. 프로젝트 폴더 안으로 들어간 후 프로젝트를 시작할 수 있습니다.

cd <project-name>
yarn dev

✅첫걸음 끝! 프로젝트를 실행 중입니다! Chakra UI는 Index.vue 페이지를 변경하여 모든 것이 올바르게 실행되고 있음을 알려줍니다.

🎁 아이콘 추가

이 게시물에서는 FontAwesome Icons를 사용하겠습니다. 원하는 경우 좋아하는 아이콘 팩을 선택하세요.

다음 yarn 명령을 사용하여 프로젝트에 추가할 수 있습니다.

yarn add @fortawesome/fontawesome-free
yarn add @fortawesome/free-brands-svg-icons

첫 번째 패키지 @fontawesome-free는 Font Awesome 라이브러리의 무료 아이콘입니다. 다른 패키지 @free-brands-svg-icons는 Font Awesome 라이브러리의 Twitter 등과 같은 브랜드의 무료 아이콘입니다.

이 프로젝트에서는 brands-svg-icons를 사용하여 아래와 같이 목록을 만듭니다.



다음 큰 단계는 사용하려는 아이콘(예: Twitter 아이콘)을 가져오는 것입니다.

nuxt.config.js 파일 내에서 아이콘 상단에 가져오기를 추가해야 합니다.

import { faTwitter, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons'

그런 다음 구성 개체 내부의 Chakra 플러그인에 아이콘을 추가해야 합니다.



거기는! 🎉 이제 템플릿 내부의 아이콘을 사용할 준비가 되었습니다!

템플릿에서 SVG 아이콘을 쉽게 렌더링하기 위해 Chakra UI의 CIcon 구성 요소를 사용합니다.



name prop에서 icon 키를 전달해야 합니다. Font Awesome 아이콘의 경우 fa와 소문자가 없는 아이콘 이름(faTwitter)입니다.

소품에 대한 자세한 내용은 설명서here를 확인하는 것이 좋습니다.

저는 Chakra UI Vue 및 Nuxt.js에서 아이콘을 사용하는 것이 얼마나 쉬운지 정말 좋아합니다. 읽어 주셔서 감사합니다. 다음 프로젝트에 도움이 되기를 바랍니다.

❤️ 이 블로그에 기여하기

질문이 있거나 실수를 발견했거나 팁이 있습니까? 연락주세요!