Блог

Я включил библиотеку FontAwesome в свое приложение react. теперь я пытаюсь создать файл определения реакции, например, с парами значений ключей. как показано ниже

 icon_def.js  import { library } from '@fortawesome/fontawesome-svg-core' import { fas, faMousePointer } from '@fortawesome/free-solid-svg-icons' import { far, faHandPaper, faLaugh } from '@fortawesome/free-regular-svg-icons'   library.add(fas, faMousePointer) library.add(far, faHandPaper, faLaugh)  const icon = {  faMousePointer : ["fas", "mouse-pointer"] }   

теперь это можно использовать во всем проекте react. как показано ниже

 lt;FontAwesomeIcon icon={icon.faMousePointer} className={'hi-c'} /gt;  

Поэтому, используя этот подход, вы должны экспортировать значок в icon_def.js и экспортируйте его всякий раз, когда вы захотите его использовать:

 import { library } from '@fortawesome/fontawesome-svg-core' import { fas, faMousePointer } from '@fortawesome/free-solid-svg-icons' import { far, faHandPaper, faLaugh } from '@fortawesome/free-regular-svg-icons'   library.add(fas, faMousePointer) library.add(far, faHandPaper, faLaugh)  const icon = {  faMousePointer : ["fas", "mouse-pointer"] } export default icon;  

Так что всякий раз, когда вы хотели, чтобы мы это:

 //Sample.js //assuming icon_def is in the root directory import icon from "/icon_def"  . . . lt;FontAwesomeIcon icon={icon.faMousePointer} className={'hi-c'} /gt;  

Это хорошая практика. Однако, если вы хотите иметь доступ к значку во всем приложении в браузере, вы также можете использовать объект Windows таким образом:

 windows.icon = {  faMousePointer : ["fas", "mouse-pointer"] }  

А потом, когда тебе это понадобится: faMousePointer} Имя класса={‘привет-с’} /gt; Но так как это может привести к конфликту с другими библиотеками, это не рекомендуется.