fa icon chooser

멋진 글꼴 아이콘 선택기

Font Awesome Icon 검색 및 발견 경험을 제공하려는 다른 프로젝트에서 사용하기 위해 Stencil로 구축된 웹 구성 요소입니다.

Font Awesome Icon Gallery와 동일한 Algolia 검색을 통해 제공됩니다.

예를 들어 Font Awesome 공식 WordPress 플러그인에서 사용됩니다.

이 구성 요소를 사용하려면 JavaScript 및 DOM에서 직접 프런트 엔드 개발이 필요합니다. Font Awesome을 앱과 구성 요소에 통합하는 개발자를 위한 것입니다.

개요

아이콘 선택기는 해당 키트의 고유 토큰을 사용하여 Font Awesome Kit와 함께 작동하거나 Font Awesome 버전 번호만 제공된 키트 없이 작동하도록 구성할 수 있습니다.

키트가 아닌 모드에서는 Font Awesome Free만 사용할 수 있습니다.

키트와 함께 사용하면 해당 키트의 구성에 따라 모든 것을 사용할 수 있습니다.

• 폰트 어썸 프로

• 폰트 굉장 6

• 키트 아이콘 업로드: 키트에 업로드된 모든 아이콘은 선택기에서 사용할 수 있습니다.

사용자는 Fontawesome.com의 해당 키트 설정 페이지에서 자신의 키트를 구성하고 GraphQL API를 통해 키트 설정에 대한 액세스 권한을 부여하는 API 토큰을 생성합니다.

사용자는 해당 키트 토큰과 API 토큰을 코드에 제공합니다. 귀하의 코드는 fa-icon-chooser 에 대한 소품으로 키트 토큰을 제공합니다. 코드는 API 토큰을 사용하여 토큰 엔드포인트에서 액세스 토큰을 가져온 다음 결과 액세스 토큰을 사용하여 handleQuery() 콜백 함수의 모든 쿼리를 승인합니다.

쿼리 및 아이콘 선택기와 사용자의 상호 작용 결과를 처리하기 위한 몇 가지 다른 콜백 함수의 자체 구현을 제공합니다.

예시 상호작용

1. 사용자는 앱에서 "아이콘 삽입" 버튼을 클릭하는 등 Font Awesome 아이콘을 삽입하는 몇 가지 작업을 수행합니다.
2. 귀하의 코드는 다양한 필수 소품을 제공하는 이 아이콘 선택기를 마운트하고 DOM에서 실행될 finish 이벤트를 수신합니다.
3. 코드는 해당 이벤트에서 전달한 IconChooserResult 개체를 사용하여 사용자가 선택한 결과를 렌더링합니다.

예를 들어 IconChooserResult 다음과 같습니다.

 { prefix : "fad" , iconName : "alien" }

코드가 FontAwesomeIcon 구성 요소를 사용하는 React 앱인 경우 다음을 빌드할 수 있습니다.

 < FontAwesomeIcon icon = { [ prefix , iconName ] } / >

코드가 JavaScript로 작성되었으며 HTML 요소를 문자열로 작성해야 하는 경우 다음과 같을 수 있습니다.

 const icon = `<i class=" ${ prefix } ${ iconName } "></i>`

코드가 WordPress 플러그인 또는 테마인 경우 다음과 같은 단축 코드가 생성될 수 있습니다.

 const icon = `[icon prefix=" ${ prefix } " name=" ${ iconName } "]` 

설정

다음 중 하나를 선택하십시오.

1. fa-icon-chooser 웹 구성 요소를 직접 사용하세요. 해당 구성 요소 패키지에서 해당 설정 지침을 찾으세요.
2. JavaScript 프레임워크 통합을 사용합니다. 현재 사용 가능한 유일한 것은 React용입니다.

기여자

Font Awesome 팀:

	이름	GitHub
	마이크 윌커슨	@mlwilkerson
	프랜시스 보츠포드	@frrrrances
	켈시 잭슨	@kelseythejackson