将 Font Awesome Pro 添加到 React App - 入门
Adding Font Awesome Pro to React App - getting started
我正在尝试将 Fontawesome pro 添加到我的 React 应用程序中。
我已经尝试了 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",
我看过这个 post 并注意到其他人正在努力弄清楚如何开始使用很棒的字体。
我已将全局配置身份验证令牌添加到我的应用程序。
我已阅读升级说明here。
目前 - 我收到一条错误消息:
Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
在该页面中,我有:
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)}</pre>
</div>
)
HowPage.propTypes = {
how: PropTypes.object // from enhancer (firestoreConnect + connect)
}
export default 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 - 我不知道在哪里调用库,我不知道这个例子是否意味着用户只能访问那个 [= =64=](faSpinnerThird,faCircle)。
我正在使用 Material-UI - 并且可以看到它正在考虑使用很棒的字体图标。我只是不知道如何设置它。
PS:GitHub 支持页面上的 contributing guidelines 要求用 react-fontawesome 标记问题。该参考没有标签 - 我没有足够的积分来创建一个 - 也许有的人可以解决这个问题。
根据the "importing icons" documentation,没有@fortawesome/pro-brands-svg-icons
。只有 @fortawesome/free-brands-svg-icons
.
对于其他在 React 中与 FA 苦苦挣扎的人 - PKK 对此的回答 post 帮助了我
但是,它似乎不适用于 2 个单词的图标名称。但是 - 至少它适用于许多图标。我一直认为 FA 即插即用 - 花了很多时间才弄清楚如何让它工作。
我正在尝试将 Fontawesome pro 添加到我的 React 应用程序中。
我已经尝试了 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",
我看过这个 post 并注意到其他人正在努力弄清楚如何开始使用很棒的字体。
我已将全局配置身份验证令牌添加到我的应用程序。
我已阅读升级说明here。
目前 - 我收到一条错误消息:
Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
在该页面中,我有:
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)}</pre>
</div>
)
HowPage.propTypes = {
how: PropTypes.object // from enhancer (firestoreConnect + connect)
}
export default 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()
我认为说明要我在其中编写该库添加调用 - 但我不明白该怎么做。
我已经看到了
我正在使用 Material-UI - 并且可以看到它正在考虑使用很棒的字体图标。我只是不知道如何设置它。
PS:GitHub 支持页面上的 contributing guidelines 要求用 react-fontawesome 标记问题。该参考没有标签 - 我没有足够的积分来创建一个 - 也许有的人可以解决这个问题。
根据the "importing icons" documentation,没有@fortawesome/pro-brands-svg-icons
。只有 @fortawesome/free-brands-svg-icons
.
对于其他在 React 中与 FA 苦苦挣扎的人 - PKK 对此的回答 post 帮助了我
但是,它似乎不适用于 2 个单词的图标名称。但是 - 至少它适用于许多图标。我一直认为 FA 即插即用 - 花了很多时间才弄清楚如何让它工作。