Vue와 NuxtJS에서 글꼴을 설정하면 좋아요.

만약 네가 이미 몇 년 동안 바위 밑에서 살았지만, 모른다면, 아주 좋은 아이콘 라이브러리가 있을 것이다.이것은 유틸리티 클래스와 같은 모든 사이트에서 사용할 수 있는 SVG 기반의 소스입니다.

두 가지 다른 선택이 당신을 대단하게 만들었어요.

설정 단계를 완료하기 전에 Vue 또는 Nuxt 프로젝트에서 Fontawesome 아이콘을 사용하는 두 가지 방법이 있습니다.

구성 요소 기반 아이콘

또는 유틸리티 클래스 기반 아이콘

이 두 가지 선택은 모두 효과가 있지만, 실제로는 선호하는 문제일 뿐이다.그러나 이들의 설정은 매우 비슷하기 때문에 나는 이 두 가지 방법을 여기서 보여줄 것이다.
어셈블리 기반 아이콘을 사용하여 다음 아이콘을 추가할 수 있습니다.

<font-awesome-icon :icon="['fas', 'user']" />

유틸리티 기반 클래스 아이콘을 사용하여 이러한 아이콘을 만들 수 있습니다.

<i class="fa fas fa-user"></i>

Vue는 구성 요소화된 프레임워크이기 때문에 어떤 사람들은 다른 어떤 구성 요소를 사용하듯이 멋진 아이콘을 사용하는 것을 정말 좋아한다.나 개인적으로는 없다.
나는 실용적인 방법을 정말 좋아한다.나는 이것이 매우 간단하다는 것을 발견했다. 나는 다른 Tailwind 실용 프로그램 클래스나 일반적인 CSS를 사용하여 아이콘 스타일을 더욱 디자인할 수 있다.

"fortawesome" 패키지 설치

이것은 정확하다.이 소포는 정말 대단하다.안 무서워.왜냐고 묻지 마...
가장 좋아하는 패키지 관리자를 사용하여 fortawesome 의존항을 설치합니다.

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

이렇게 하면 추가해야 하는 핵심 패키지가 설치됩니다.고체 아이콘 패키지도 있습니다.Fontawesome의 엔티티 아이콘을 사용할 수 있습니다.
프로젝트에 더 많은 아이콘을 추가하려면 "브랜드"와 "일반"아이콘 패키지를 설치할 수 있습니다.(나는 최종적으로 같은 브랜드 아이콘을 사용했다. 예를 들어GitHub이다.)

npm install @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons

공식 NPM 패키지: @fortawesome/fontawesome-svg-core

Vue JS의 설정

일반적인 Vue JS 프로젝트를 사용하는 경우 u main을 엽니다.js uu 프로젝트 파일에서 다음 코드를 추가합니다.

/* Import all the font awesome goodness */
import { library } from '@fortawesome/fontawesome-svg-core'

// loads all the "solid" icons
import { fas } from '@fortawesome/free-solid-svg-icons'

// loads only the "twitter" brand icon
// import { faTwitter } from '@fortawesome/free-brands-svg-icons'

// add each of the imported icons into the app
library.add(fas); // can be a list of all the icons e.g. (fas, fab, faTwitter, etc)

// to use component based icons
//import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// to use class based icons
import { dom } from '@fortawesome/fontawesome-svg-core'
dom.watch();

Note: Specifically, you should add this code before you create your "app" object.

여기에는 library에서 fortawesome core 대상을 가져옵니다.라이브러리에서 프로젝트에 사용할 아이콘을 지정할 수 있습니다.추가 정보
다음에 나는 fas 아이콘 패키지에서 solid를 가져왔다.이것은 solid icon pack에서 모든 엔티티 아이콘을 가져오는 방법입니다.같은 방법도 브랜드 아이콘에 적용된다.모든 브랜드 아이콘을 가져오려면 fab 아이콘 패키지에서 가져오십시오brand.
일리가 있다
프로젝트에서 특정 아이콘만 사용하려면 각 아이콘 패키지에서 필요한 아이콘만 가져올 수 있습니다.예를 들어 브랜드 패키지에서만 트위터 아이콘을 가져오려면 다음 줄을 사용하십시오.

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

Note: the icon names are written in Pascal case. (e.g. "faTwitter", not"fa-twitter")

프로젝트를 가져오는 데 필요한 모든 아이콘을 라이브러리에 추가합니다.

library.add(fas); // can be a list of all the icons e.g. (fas, fab, faTwitter, etc)

// addd all solid icons and twitter
library.add(fas, faTwitter);

add 함수에서 가져오고 프로젝트에 사용하고자 하는 모든 아이콘의 목록을 전달할 수 있습니다.

구성 요소 기반 아이콘을 사용하려면 다음과 같이 하십시오.

FontAwesomeIcon 구성 요소를 각 컴퓨터로 가져옵니다.이 구성 요소의 vue 페이지를 사용합니다.이렇게 하면 다른 vu 구성 요소를 사용하는 것처럼 경외되는 글꼴 아이콘을 사용할 수 있습니다.이렇게:

<font-awesome-icon :icon="['fas', 'user']" />

어레이를 icon 아이템에 전달하기만 하면 됩니다.그룹의 첫 번째 항목은 가져온 라이브러리이고, 두 번째 항목은 아이콘 이름 자체입니다.

유틸리티 클래스 아이콘을 사용하려면 다음과 같이 하십시오.

Fort Core에서 dom을 가져옵니다.dom 아이콘을 사용할 수 있는 실용적인 방법이 있습니다.dom.watch() 함수는 Vue가 정상적인 글꼴 클래스를 정상적으로 작동하는 신기한 점이다.
이러한 방법으로 일반 html과 같은 아이콘을 추가할 수 있습니다.

<i class="fa fas fa-user"></i>

아이콘에 구성 요소 방법을 사용하려면 가져오거나 사용할 필요가 없음dom dom.watch()하지만 내가 전에 말했듯이 이것은 내가 진정으로 좋아하는 방법이다.더 깨끗해 보여요.

NuxtJS에서 설정

Nuxt JS 프로그램에 Fontawesome 아이콘을 추가하려면 설정이 매우 유사합니다.유일한 차이점은 Nuxt가 Fontawesome 아이콘을 사용한다고 실제적으로 알리기 위해서, 위의 코드를 사용하여 플러그인을 만들고, 이 플러그인을 nuxt.config.js 파일에 불러와야 한다는 것입니다.

훌륭한 플러그인 만들기

Nuxt 응용 프로그램의 루트 디렉토리에서 새 파일을 생성합니다~/plugins/fontawesome.js.
만약 plugins 폴더가 없다면, 지금 그것을 만듭니다.🙂
위에서 설명한 대로 프로젝트에 사용할 모든 아이콘을 가져오고 추가합니다.

/* Import all the font awesome goodness */
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
library.add(fas, faTwitter);
dom.watch();

새 플러그인 파일에 코드를 저장합니다.

새 플러그인을 nuxt.config.js 파일에 추가하려면 다음과 같이 하십시오.

plugins: [
  '~/plugins/fontawesome.js',
],

다 끝났어.핫 서버를 다시 로드하고 테스트합니다.경탄할 만한 멋을 즐겨라!
how to setup font awesome in vue에 관한 이 글은 처음에 나Nick Frostbutter가 나의 개인 블로그에 쓴 것이다.