Я пытаюсь добавить Fontawesome pro в свое реактивное приложение.
Я перепробовал почти все варианты на вкладке "Начало работы" для Font Awesome - и все, что производит, - это бесплатные бренды.Итак - теперь у меня есть масса попыток и в настоящее время я застрял на следующих инструкциях, изложенных clodal в этом посте
У меня есть package.json со следующими зависимостями:
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/pro-light-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/pro-regular-svg-icons": "^5.5.0",
"@fortawesome/pro-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",
Я видел этот пост и отмечаю, что другие пытаются выяснить, как начать работу со шрифтом awesome.
Я добавил глобальный токен аутентификации конфигурации в свое приложение.
Я прочитал инструкции по обновлению здесь .
В настоящее время - я получаю сообщение об ошибке:
Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
На этой странице у меня есть:
<code> import React from 'react'
import PropTypes from 'prop-types'
import classes from './HowPage.scss'
import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";
import Clearfix from "components/Clearfix/Clearfix.jsx";
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { faTwitter } from '@fortawesome/pro-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
export const HowPage = ({ how }) => (
<div className={classes.container}>
<h1 style={headstyle}>How it Works</h1>
<GridContainer justify="center">
<GridItem
xs={12}
sm={8}
md={8}
className={`${classes.mlAuto} ${classes.mrAuto} ${
classes.textCenter
}`}
>
<span>
<i className="fas fa-layer-plus"></i>
</span>
<i className="fal fa-stroopwafel"></i>
<FontAwesomeIcon icon="coffee" />
<i className="fab fa-twitter" />
</GridItem>
</GridContainer>
<pre>{JSON.stringify(how, null, 2)} ) HowPage.propTypes = {how:PropTypes.object // от усилителя (firestoreConnect + connect)} экспорт по умолчанию HowPage
В моем index.html у меня есть:
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
Я пытался добавить эти операторы импорта встраница, на которой я пытаюсь использовать шрифты (я не понимаю инструкции по сборке библиотеки).
Это приводит к ошибкам (ожидается, учитывая следующую проблему):
Я не знаюНе знаю, куда добавить следующую библиотеку, добавить вызов:
library.add(fas, faTwitter)
Мое приложение инициализируется через main.js.На этой странице есть:
import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import { initScripts } from 'utils'
import { version } from '../package.json'
import { env } from './config'
import './styles/core.scss'
// import { library } from '@fortawesome/fontawesome-svg-core'
// import { fal } from '@fortawesome/pro-light-svg-icons'
// Window Variables
// ------------------------------------
window.version = version
window.env = env
initScripts()
// Store Initialization
// ------------------------------------
const initialState = window.___INITIAL_STATE__ || {
firebase: { authError: null }
}
const store = createStore(initialState)
// Render Setup
// ------------------------------------
const MOUNT_NODE = document.getElementById('root')
let render = () => {
const App = require('./containers/App').default
const routes = require('./routes/index').default(store)
ReactDOM.render(<App store={store} routes={routes} />, MOUNT_NODE)
}
// Development Tools
// ------------------------------------
if (__DEV__) {
if (module.hot) {
const renderApp = render
const renderError = error => {
const RedBox = require('redbox-react').default
ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
}
render = () => {
try {
renderApp()
} catch (e) {
console.error(e) // eslint-disable-line no-console
renderError(e)
}
}
// Setup hot module replacement
module.hot.accept(['./containers/App', './routes/index'], () =>
setImmediate(() => {
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
render()
})
)
}
}
// Let's Go!
// ------------------------------------
if (!__TEST__) render()
Я думаю, что инструкции хотят, чтобы я записал эту библиотеку, добавив туда вызов - но я не могу понять, как это сделать.
Я видел это сообщение - этот пользователь выяснил, как добавить код в файл app.js.Я думаю, что застрял на этом шаге.Мой app.js находится в main.js - я не знаю, куда поместить библиотечный вызов, и я не знаю, означает ли этот пример, что у пользователя будет доступ только к двум иконкам, названным в этом посте (faSpinnerThird, faCircle).
Я использую Material-UI - и вижу, что он предполагает использование шрифтов потрясающих иконок.Я просто не могу понять, как его настроить.
PS: руководящие принципы на странице поддержки GitHub задают вопросы, которые будут помечены с помощью response-fontawesome.Нет тега для этой ссылки - у меня недостаточно очков, чтобы создать его - может быть, кто-то, кто может разобраться с этим.