1 | <a href="https://fontawesome.com">
|
2 | <img align="right" width="100" height="100" alt="Official Javascript Component" src="https://img.fortawesome.com/349cfdf6/official-javascript-component.svg">
|
3 | </a>
|
4 |
|
5 | # react-fontawesome
|
6 |
|
7 | [![npm](https://img.shields.io/npm/v/@fortawesome/react-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/react-fontawesome)
|
8 |
|
9 | > Font Awesome 5 React component using SVG with JS
|
10 |
|
11 |
|
12 |
|
13 | - [Introduction](#introduction)
|
14 | + [Upgrading Font Awesome?](#upgrading-font-awesome)
|
15 | + [Get started](#get-started)
|
16 | + [Learn about our new SVG implementation](#learn-about-our-new-svg-implementation)
|
17 | + [Going from 0.0.x to 0.1.0](#going-from-00x-to-010)
|
18 | - [Installation](#installation)
|
19 | - [Add more styles or Pro icons](#add-more-styles-or-pro-icons)
|
20 | - [Usage](#usage)
|
21 | * [Explicit Import](#explicit-import)
|
22 | * [Build a Library to Reference Icons Throughout Your App More Conveniently](#build-a-library-to-reference-icons-throughout-your-app-more-conveniently)
|
23 | * [Unit Testing](#unit-testing)
|
24 | * [Processing i elements into svg using Font Awesome](#processing-i-elements-into-svg-using-font-awesome)
|
25 | - [Features](#features)
|
26 | * [Basic](#basic)
|
27 | * [Advanced](#advanced)
|
28 | * [TypeScript](#typescript)
|
29 | - [Integrating with other tools and frameworks](#integrating-with-other-tools-and-frameworks)
|
30 | * [Next.js](#nextjs)
|
31 | - [Frequent questions](#frequent-questions)
|
32 | * [How do I import the same icon from two different styles?](#how-do-i-import-the-same-icon-from-two-different-styles)
|
33 | * [I don't think tree-shaking is working; got any advice?](#i-dont-think-tree-shaking-is-working-got-any-advice)
|
34 | - [How to Help](#how-to-help)
|
35 | - [Contributors](#contributors)
|
36 | - [Releasing this project (only project owners can do this)](#releasing-this-project-only-project-owners-can-do-this)
|
37 |
|
38 |
|
39 |
|
40 | ## Introduction
|
41 |
|
42 | Hey there! We're glad you're here...
|
43 |
|
44 | #### Upgrading Font Awesome?
|
45 |
|
46 | If you've used Font Awesome in the past (version 4 or older) there are some
|
47 | things that you should learn before you dive in.
|
48 |
|
49 | > https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
|
50 |
|
51 | #### Get started
|
52 |
|
53 | This package is for integrating with React. If you aren't using React then it's
|
54 | not going to help you. Head over to our "Get Started" page for some guidance.
|
55 |
|
56 | > https://fontawesome.com/how-to-use/on-the-web/setup/getting-started
|
57 |
|
58 | #### Learn about our new SVG implementation
|
59 |
|
60 | This package, under the hood, uses SVG with JS and the `@fortawesome/fontawesome-svg-core` library. This implementation differs drastically from
|
61 | the web fonts implementation that was used in version 4 and older of Font Awesome. You might head over there to learn about how it works.
|
62 |
|
63 | > https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core
|
64 |
|
65 | #### Going from 0.0.x to 0.1.0
|
66 |
|
67 | See [UPGRADING.md](./UPGRADING.md).
|
68 |
|
69 | You might also be interested in the larger umbrella project [UPGRADING.md](https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md)
|
70 |
|
71 | ## Installation
|
72 |
|
73 | Using NPM:
|
74 |
|
75 | ```
|
76 | $ npm i --save @fortawesome/fontawesome-svg-core
|
77 | $ npm i --save @fortawesome/free-solid-svg-icons
|
78 | $ npm i --save @fortawesome/react-fontawesome
|
79 | ```
|
80 | or
|
81 | ```
|
82 | $ npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
|
83 | ```
|
84 |
|
85 | Or with Yarn:
|
86 |
|
87 | ```
|
88 | $ yarn add @fortawesome/fontawesome-svg-core
|
89 | $ yarn add @fortawesome/free-solid-svg-icons
|
90 | $ yarn add @fortawesome/react-fontawesome
|
91 | ```
|
92 | or
|
93 | ```
|
94 | $ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
|
95 | ```
|
96 |
|
97 | ## Add more styles or Pro icons
|
98 |
|
99 | Brands are separated into their own style and for customers upgrading from
|
100 | version 4 to 5 we have a limited number of Regular icons available.
|
101 |
|
102 | **Visit [fontawesome.com/icons](https://fontawesome.com/icons) to search for free and Pro icons**
|
103 |
|
104 | ```
|
105 | $ npm i --save @fortawesome/free-brands-svg-icons
|
106 | $ npm i --save @fortawesome/free-regular-svg-icons
|
107 | ```
|
108 |
|
109 | If you are a [Font Awesome Pro](https://fontawesome.com/pro) subscriber you can install Pro packages; this requires [additional configuration](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers).
|
110 |
|
111 | ```
|
112 | $ npm i --save @fortawesome/pro-solid-svg-icons
|
113 | $ npm i --save @fortawesome/pro-regular-svg-icons
|
114 | $ npm i --save @fortawesome/pro-light-svg-icons
|
115 | $ npm i --save @fortawesome/pro-duotone-svg-icons
|
116 | ```
|
117 |
|
118 | ## Usage
|
119 |
|
120 | You can use Font Awesome icons in your React components as simply as this:
|
121 |
|
122 | ```javascript
|
123 | <FontAwesomeIcon icon="coffee" />
|
124 | ```
|
125 |
|
126 | That simple usage is made possible when you add the `"coffee"` icon, to the
|
127 | _library_.
|
128 |
|
129 | This is one of the two ways you can use Font Awesome 5 with React. We'll
|
130 | summarize both ways briefly and then get into the details of each below.
|
131 |
|
132 | 1. **Explicit Import**
|
133 |
|
134 | Allows icons to be subsetted, optimizing your final bundle. Only the icons
|
135 | you import are included in the bundle. However, explicitly importing icons
|
136 | into each of many components in your app might become tedious, so you may
|
137 | want to build a library.
|
138 |
|
139 | 2. **Build a Library**
|
140 |
|
141 | Explicitly import icons just once in some init module. Then add them to the
|
142 | library. Then reference any of them by icon name as a string from any
|
143 | component. No need to import the icons into each component once they're in
|
144 | the library.
|
145 |
|
146 | ### Explicit Import
|
147 |
|
148 | For this example, we'll also reference the `@fortawesome/free-solid-svg-icons`
|
149 | module, so make sure you've added it to the project as well:
|
150 |
|
151 | ```
|
152 | $ npm i --save @fortawesome/free-solid-svg-icons
|
153 | ```
|
154 |
|
155 | or
|
156 |
|
157 | ```
|
158 | $ yarn add @fortawesome/free-solid-svg-icons
|
159 | ```
|
160 |
|
161 | Now, a simple React component might look like this:
|
162 |
|
163 | ```javascript
|
164 | import ReactDOM from 'react-dom'
|
165 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
166 | import { faCoffee } from '@fortawesome/free-solid-svg-icons'
|
167 |
|
168 | const element = <FontAwesomeIcon icon={faCoffee} />
|
169 |
|
170 | ReactDOM.render(element, document.body)
|
171 | ```
|
172 |
|
173 | Notice that the `faCoffee` icon is imported from
|
174 | `@fortawesome/free-solid-svg-icons` as an object and then provided to the
|
175 | `icon` prop as an object.
|
176 |
|
177 | Explicitly importing icons like this allows us to subset Font Awesome's
|
178 | thousands of icons to include only those you use in your final bundled file.
|
179 |
|
180 | ### Build a Library to Reference Icons Throughout Your App More Conveniently
|
181 |
|
182 | You probably want to use our icons in more than one component in your app,
|
183 | right?
|
184 |
|
185 | But with explicit importing, it could become tedious to import into each of
|
186 | your app's components every icon you want to reference in that component.
|
187 |
|
188 | So, add them to the _library_. Do this setup once in some initializing module
|
189 | of your app, adding all of the icons you'll use in your app's React components.
|
190 |
|
191 | Suppose `App.js` initializes my app, including the library. For this example,
|
192 | we'll add two individual icons, `faCheckSquare` and `faCoffee`. We also add all
|
193 | of the brands in `@fortawesome/free-brands-svg-icons`. This example would
|
194 | illustrate the benefits of building a library even more clearly if it involved
|
195 | fifty or a hundred icons, but we'll keep the example brief and leave it to your
|
196 | imagination as to how this might scale up with lots of icons.
|
197 |
|
198 | Don't forget to add `@fortawesome/free-brands-svg-icons`:
|
199 |
|
200 | ```
|
201 | $ npm i --save @fortawesome/free-brands-svg-icons
|
202 | ```
|
203 |
|
204 | or
|
205 |
|
206 | ```
|
207 | $ yarn add @fortawesome/free-brands-svg-icons
|
208 | ```
|
209 |
|
210 | In `App.js`, where our app is initialized:
|
211 |
|
212 | ```javascript
|
213 | import ReactDOM from 'react-dom'
|
214 | import { library } from '@fortawesome/fontawesome-svg-core'
|
215 | import { fab } from '@fortawesome/free-brands-svg-icons'
|
216 | import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
|
217 |
|
218 | library.add(fab, faCheckSquare, faCoffee)
|
219 | ```
|
220 |
|
221 | OK, so what's happening here?
|
222 |
|
223 | In our call to <span style="white-space:nowrap;">`library.add()`</span> we're passing
|
224 |
|
225 | - `fab`: which represents _all_ of the brand icons in
|
226 | <span style="white-space:nowrap;">`@fortawesome/free-brands-svg-icons`</span>.
|
227 | So any of the brand icons in that package may be referenced by icon name
|
228 | as a string anywhere else in our app.
|
229 | For example: `"apple"`, `"microsoft"`, or `"google"`.
|
230 | - `faCheckSquare` and `faCoffee`: Adding each of these icons individually
|
231 | allows us to refer to them throughout our app by their icon string names,
|
232 | `"check-square"` and `"coffee"`, respectively.
|
233 |
|
234 | Now, suppose you also have React components `Beverage` and `Gadget` in your app.
|
235 | You don't have to re-import your icons into them. Just import the `FontAwesomeIcon`
|
236 | component, and when you use it, supply the icon prop an icon name as a string.
|
237 |
|
238 | We'll make `Beverage.js` a functional component:
|
239 |
|
240 | ```javascript
|
241 | import React from 'react'
|
242 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
243 |
|
244 | export const Beverage = () => (
|
245 | <div>
|
246 | <FontAwesomeIcon icon="check-square" />
|
247 | Favorite beverage: <FontAwesomeIcon icon="coffee" />
|
248 | </div>
|
249 | )
|
250 | ```
|
251 |
|
252 | There's one another piece of magic that's happening in the background when
|
253 | providing icon names as strings like this: the `fas` prefix (for Font Awesome
|
254 | Solid) is being inferred as the default. Later, we'll look at what that means
|
255 | and how we can do something different than the default.
|
256 |
|
257 | Now suppose `Gadget.js` looks like this:
|
258 |
|
259 | ```javascript
|
260 | import React from 'react'
|
261 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
262 |
|
263 | export const Gadget = () => (
|
264 | <div>
|
265 | <FontAwesomeIcon icon="check-square" />
|
266 | Popular gadgets come from vendors like:
|
267 | <FontAwesomeIcon icon={['fab', 'apple']} />
|
268 | <FontAwesomeIcon icon={['fab', 'microsoft']} />
|
269 | <FontAwesomeIcon icon={['fab', 'google']} />
|
270 | </div>
|
271 | )
|
272 | ```
|
273 |
|
274 | Notice:
|
275 |
|
276 | - We used the `"check-square"` icon name again in this component, though we
|
277 | didn't have to explicitly import it into this component. With one explicit import of
|
278 | that icon in `App.js`, and adding it to the library, we've managed to use
|
279 | it by name in multiple components.
|
280 | - We used the `"apple"`, `"microsoft"`, and `"google"` brand icons, which were
|
281 | never explicitly _individually_ imported, but they're available to us by
|
282 | name as strings because `fab` was added to our library in `App.js`, and
|
283 | `fab` includes all of those icons.
|
284 | - We added the `fab` prefix to reference those brand icons.
|
285 |
|
286 | Adding a prefix—and the syntax we used to do it—are new. So what's
|
287 | going on here?
|
288 |
|
289 | First, recall when we introduced `<FontAwesomeIcon icon="coffee"/>` and learned
|
290 | that a prefix of `fas` was being added to `"coffee"` by default.
|
291 |
|
292 | The `"check-square"` icon is getting a default prefix of `fas` here too, which
|
293 | is what we want, because that icon also lives in the
|
294 | `@fortawesome/free-solid-svg-icons` package.
|
295 |
|
296 | However, the `"apple"`, `"microsoft"`, and `"google"` brand icons live in the
|
297 | package `@fortawesome/free-brands-svg-icons`. So we need to specify a
|
298 | different prefix for them—not the default `fas`, but `fab`, for Font Awesome
|
299 | _Brand_.
|
300 |
|
301 | When specifying a prefix with an icon name, both are given as strings.
|
302 |
|
303 | Now, what about that syntax?
|
304 |
|
305 | The `icon` prop expects a single object:
|
306 |
|
307 | - It could be an icon object, like `{faCoffee}`.
|
308 | - It could a string object, like `"coffee"`.
|
309 | (The curly braces around a string object supplied to a prop are optional,
|
310 | so we've omitted them.)
|
311 | - Or it could be an `Array` of strings, where the first element is a prefix,
|
312 | and the second element is the icon name: `{["fab", "apple"]}`
|
313 |
|
314 | ### Unit Testing
|
315 |
|
316 | When testing components, you'll want to make sure that any icons referenced in those components are available for testing purposes. You have a couple choices here:
|
317 |
|
318 | 1. If you want to test a child component on its own, you can [import its icons explicitly](#explicit-import).
|
319 |
|
320 | 2. If you've built a library instead, and your test doesn't include your root component that defines your library of icons, you may see errors like this:
|
321 |
|
322 | `Could not find icon { prefix: 'fas', iconName: 'chevron-right' }`
|
323 |
|
324 | If this happens, and the icon isn't important to the particular test, you can mock FontAwesomeIcon like this:
|
325 |
|
326 | ```js
|
327 | import React from 'react'
|
328 |
|
329 | export function FontAwesomeIcon(props) {
|
330 | return <i className="fa" />
|
331 | }
|
332 | ```
|
333 |
|
334 | With [create-react-app](https://github.com/facebook/create-react-app), you can put this code in `src/__mocks__/@fortawesome/react-fontawesome.js` to automatically include it in any tests, and alleviate errors.
|
335 |
|
336 | ### Processing i elements into svg using Font Awesome
|
337 |
|
338 | Our hope and intention is that React users will use this package (`react-fontawesome`)
|
339 | when using Font Awesome. This component leverages React's architecture and philosophy.
|
340 |
|
341 | However, **if you cannot use these components everywhere in your app and still
|
342 | have `<i>` tags on your page that need to be converted to `<svg>` tags we can
|
343 | still help you**.
|
344 |
|
345 | A basic installation of [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=svg-with-js) has
|
346 | the ability to automatically transform `<i class="fas fa-coffee"></i>` into
|
347 | `<svg class="...">...</svg>` icons. This technology works with the browser's
|
348 | DOM, [`requestAnimationFrame`][raf], and [`MutationObserver`][mo].
|
349 |
|
350 | When using the `@fortawesome/fontawesome-svg-core` package this **behavior is
|
351 | disabled by default**. (We would _highly_ recommend you use `FontAwesomeIcon`
|
352 | if you can) This project uses that core package so you will have to explicitly
|
353 | enable it like this:
|
354 |
|
355 | To configure the core library to convert non-React'ified parts of your App:
|
356 |
|
357 | ```javascript
|
358 | import { dom } from '@fortawesome/fontawesome-svg-core'
|
359 |
|
360 | dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver
|
361 | ```
|
362 |
|
363 | [raf]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
|
364 | [mo]: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
365 |
|
366 | ## Features
|
367 |
|
368 | The following features are available as part of Font Awesome. Note that the syntax is different from our general web-use documentation.
|
369 |
|
370 | In the following code snippets, we'll use the shortcut notation for the
|
371 | icons—referencing the icons by their names as strings.
|
372 |
|
373 | But remember, that option is only valid after you've either
|
374 | explicitly imported and added those icons to the library, or externally
|
375 | loaded an icon bundle. See the sections above for the details.
|
376 |
|
377 | ### Basic
|
378 |
|
379 | [Size](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons):
|
380 |
|
381 | ```javascript
|
382 | <FontAwesomeIcon icon="spinner" size="xs" />
|
383 | <FontAwesomeIcon icon="spinner" size="lg" />
|
384 | <FontAwesomeIcon icon="spinner" size="6x" />
|
385 | ```
|
386 |
|
387 | Note that icon size can be controlled with the CSS `font-size` attribute, and `FontAwesomeIcon`'s `size` prop determines icon size relative to the current `font-size`.
|
388 |
|
389 | [Fixed width](https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons):
|
390 |
|
391 | ```javascript
|
392 | <FontAwesomeIcon icon="spinner" fixedWidth />
|
393 | ```
|
394 |
|
395 | Inverse:
|
396 |
|
397 | ```javascript
|
398 | <FontAwesomeIcon icon="spinner" inverse />
|
399 | ```
|
400 |
|
401 | [List Items](https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list):
|
402 |
|
403 | ```javascript
|
404 | <FontAwesomeIcon icon="spinner" listItem />
|
405 | ```
|
406 |
|
407 | [Rotate](https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons):
|
408 |
|
409 | ```javascript
|
410 | <FontAwesomeIcon icon="spinner" rotation={90} />
|
411 | <FontAwesomeIcon icon="spinner" rotation={180} />
|
412 | <FontAwesomeIcon icon="spinner" rotation={270} />
|
413 | ```
|
414 |
|
415 | Flip horizontally, vertically, or both:
|
416 |
|
417 | ```javascript
|
418 | <FontAwesomeIcon icon="spinner" flip="horizontal" />
|
419 | <FontAwesomeIcon icon="spinner" flip="vertical" />
|
420 | <FontAwesomeIcon icon="spinner" flip="both" />
|
421 | ```
|
422 |
|
423 | Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons):
|
424 |
|
425 | ```javascript
|
426 | <FontAwesomeIcon icon="spinner" spin />
|
427 | <FontAwesomeIcon icon="spinner" pulse />
|
428 | ```
|
429 |
|
430 | [Border](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):
|
431 |
|
432 | ```javascript
|
433 | <FontAwesomeIcon icon="spinner" border />
|
434 | ```
|
435 |
|
436 | [Pull left or right](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):
|
437 |
|
438 | ```javascript
|
439 | <FontAwesomeIcon icon="spinner" pull="left" />
|
440 | <FontAwesomeIcon icon="spinner" pull="right" />
|
441 | ```
|
442 |
|
443 | [Swap opacity](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons) (duotone icons only):
|
444 |
|
445 | ```javascript
|
446 | <FontAwesomeIcon icon={['fad', 'stroopwafel']} />
|
447 | <FontAwesomeIcon icon={['fad', 'stroopwafel']} swapOpacity />
|
448 | ```
|
449 |
|
450 | Your own class names:
|
451 |
|
452 | ```javascript
|
453 | <FontAwesomeIcon icon="spinner" className="highlight" />
|
454 | ```
|
455 |
|
456 | ### Advanced
|
457 |
|
458 | [Power Transforms](https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms):
|
459 |
|
460 | ```javascript
|
461 | <FontAwesomeIcon icon="spinner" transform="shrink-6 left-4" />
|
462 | <FontAwesomeIcon icon="spinner" transform={{ rotate: 42 }} />
|
463 | ```
|
464 |
|
465 | [Masking](https://fontawesome.com/how-to-use/on-the-web/styling/masking):
|
466 |
|
467 | ```javascript
|
468 | <FontAwesomeIcon icon="coffee" mask={['far', 'circle']} />
|
469 | ```
|
470 |
|
471 | [Symbols](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-symbols):
|
472 |
|
473 | ```javascript
|
474 | <FontAwesomeIcon icon="edit" symbol />
|
475 | <FontAwesomeIcon icon="edit" symbol="edit-icon" />
|
476 | ```
|
477 |
|
478 | [Layers](https://fontawesome.com/how-to-use/on-the-web/styling/layering):
|
479 |
|
480 | ```javascript
|
481 | <span className="fa-layers fa-fw">
|
482 | <FontAwesomeIcon icon="square" color="green" />
|
483 | <FontAwesomeIcon icon="check" inverse transform="shrink-6" />
|
484 | </span>
|
485 | ```
|
486 |
|
487 | ### TypeScript
|
488 |
|
489 | Typings are included in this package. However, most types are defined in the
|
490 | underlying API library, `@fortawesome/fontawesome-svg-core`.
|
491 |
|
492 | Suppose that in one module, you add all `fas` icons to the library:
|
493 |
|
494 | ```typescript
|
495 | import { library } from '@fortawesome/fontawesome-svg-core'
|
496 | import { fas } from '@fortawesome/free-solid-svg-icons'
|
497 |
|
498 | library.add(fas)
|
499 |
|
500 | // ...
|
501 | ```
|
502 |
|
503 | Then suppose that in another module, you have some code that looks up
|
504 | one of the icons in the library. The `import` statement below imports two types
|
505 | and one function:
|
506 |
|
507 | ```typescript
|
508 | import {
|
509 | IconLookup,
|
510 | IconDefinition,
|
511 | findIconDefinition
|
512 | } from '@fortawesome/fontawesome-svg-core'
|
513 |
|
514 | const coffeeLookup: IconLookup = { prefix: 'fas', iconName: 'coffee' }
|
515 | const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)
|
516 |
|
517 | // ...
|
518 |
|
519 | export class App extends React.Component {
|
520 | render() {
|
521 | return (
|
522 | <div className="App">
|
523 | <h1>
|
524 | <FontAwesomeIcon icon={coffeeIconDefinition} />
|
525 | </h1>
|
526 | </div>
|
527 | )
|
528 | }
|
529 | }
|
530 | ```
|
531 |
|
532 | NOTE: You wouldn't normally declare intermediate objects like `coffeeLookup`
|
533 | just to look up an icon. So this is cumbersome and needlessly verbose for such
|
534 | a simple example. The purpose here is just to show how you might import type
|
535 | definitions and use them in declarations when it _does_ make sense to do so.
|
536 |
|
537 | Several types, including `IconLookup` and `IconDefinition`, appearing above,
|
538 | actually originate from the `@fortawesome/fontawesome-common-types` package.
|
539 | They are re-exported from both `@fortawesome/fontawesome-svg-core` and
|
540 | `@fortawesome/free-solid-svg-icons` (and other icon packs). This is just to
|
541 | make importing more convenient in some cases. Refer to the `index.d.ts` in any
|
542 | module to see which types it exports.
|
543 |
|
544 | ## Integrating with other tools and frameworks
|
545 |
|
546 | ### Next.js
|
547 |
|
548 | Next.js projects will experience an icon that is very large when the page first
|
549 | loads. The reason this occurs is that the necessary CSS has not been loaded
|
550 | before the icon is displayed.
|
551 |
|
552 | To fix this we need to make sure the CSS for Font Awesome is bundled with the
|
553 | Next.js app.
|
554 |
|
555 | Install `@zeit/next-css`:
|
556 |
|
557 | ```
|
558 | npm install --save-dev @zeit/next-css
|
559 | ```
|
560 |
|
561 | You may want to use `--save` instead of `--save-dev` depending on how your `package.json` is organized.
|
562 |
|
563 | Create or edit `next.config.js` in the root of your project:
|
564 |
|
565 | ```javascript
|
566 | const withCSS = require('@zeit/next-css')
|
567 | module.exports = withCSS({
|
568 | /* config options here */
|
569 | })
|
570 | ```
|
571 |
|
572 | Create or edit `./pages/_app.js`:
|
573 |
|
574 | ```javascript
|
575 | import React from 'react'
|
576 | import App, { Container } from 'next/app'
|
577 |
|
578 | import { config } from '@fortawesome/fontawesome-svg-core'
|
579 | import '@fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
|
580 | config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
|
581 |
|
582 | class MyApp extends App {
|
583 | render() {
|
584 | const { Component, pageProps } = this.props
|
585 | return <Component {...pageProps} />
|
586 | }
|
587 | }
|
588 |
|
589 | export default MyApp
|
590 | ```
|
591 |
|
592 | You may also wish to include your library calls in the `_app.js` code.
|
593 |
|
594 | ```javascript
|
595 | import React from 'react'
|
596 | import App, { Container } from 'next/app'
|
597 |
|
598 | import { config, library } from '@fortawesome/fontawesome-svg-core'
|
599 | import '@fortawesome/fontawesome-svg-core/styles.css'
|
600 | config.autoAddCss = false
|
601 |
|
602 | import { faBars, faUser } from '@fortawesome/free-solid-svg-icons'
|
603 | import { faTwitter, faFacebook } from '@fortawesome/free-brands-svg-icons'
|
604 |
|
605 | library.add(faBars, faUser, faTwitter, faFacebook)
|
606 |
|
607 | class MyApp extends App {
|
608 | render() {
|
609 | const { Component, pageProps } = this.props
|
610 | return <Component {...pageProps} />
|
611 | }
|
612 | }
|
613 |
|
614 | export default MyApp
|
615 | ```
|
616 |
|
617 | You can also use [explicit import](#explicit-import) instead of using the `library`.
|
618 |
|
619 | Create a new page:
|
620 |
|
621 | ```javascript
|
622 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
623 | import { faThumbsUp } from '@fortawesome/free-solid-svg-icons'
|
624 |
|
625 | const Index = () => (
|
626 | <div>
|
627 | <p>
|
628 | <FontAwesomeIcon icon={faThumbsUp} /> Hello Next.js
|
629 | </p>
|
630 | </div>
|
631 | )
|
632 |
|
633 | export default Index
|
634 | ```
|
635 |
|
636 | ## Frequent questions
|
637 |
|
638 | ### How do I import the same icon from two different styles?
|
639 |
|
640 | With ES modules and `import` statements we can rename:
|
641 |
|
642 | ```javascript
|
643 | import { library } from '@fortawesome/fontawesome-svg-core'
|
644 | import { faStroopwafel as fasFaStroopwafel } from '@fortawesome/pro-solid-svg-icons'
|
645 | import { faStroopwafel as farFaStroopwafel } from '@fortawesome/pro-regular-svg-icons'
|
646 |
|
647 | library.add(fasFaStroopwafel, farFaStroopwafel)
|
648 | ```
|
649 |
|
650 | ### I don't think tree-shaking is working; got any advice?
|
651 |
|
652 | Check out our [docs here](https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking).
|
653 |
|
654 | ## How to Help
|
655 |
|
656 | Review the following docs before diving in:
|
657 |
|
658 | - [CONTRIBUTING.md](CONTRIBUTING.md)
|
659 | - [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
|
660 |
|
661 | And then:
|
662 |
|
663 | 1. Check the existing issue and see if you can help!
|
664 |
|
665 | ## Contributors
|
666 |
|
667 | The following contributors have either hepled to start this project, have contributed
|
668 | code, are actively maintaining it (including documentation), or in other ways
|
669 | being awesome contributors to this project. **We'd like to take a moment to recognize them.**
|
670 |
|
671 | | | Name | GitHub |
|
672 | | :--------------------------------------------------------: | -------------- | -------------------------------------------------- |
|
673 | | <img src="https://github.com/NateRadebaugh.png?size=72" /> | Nate Radebaugh | [@NateRadebaugh](https://github.com/NateRadebaugh) |
|
674 | | <img src="https://github.com/kirkbross.png?size=72" /> | Kirk Ross | [@kirkbross](https://github.com/kirkbross) |
|
675 | | | Prateek Goel | [@prateekgoel](https://github.com/prateekgoel) |
|
676 | | <img src="https://github.com/naortor.png?size=72" /> | Naor Torgeman | [@naortor](https://github.com/naortor) |
|
677 | | <img src="https://github.com/mmhand123.png?size=72" /> | Matthew Hand | [@mmhand123](https://github.com/mmhand123) |
|
678 | | <img src="https://github.com/calvinf.png?size=72" /> | calvinf | [@calvinf](https://github.com/calvinf) |
|
679 | | <img src="https://github.com/chimericdream.png?size=72" /> | Bill Parrott | [@chimericdream](https://github.com/chimericdream) |
|
680 | | <img src="https://github.com/baelec.png?size=72" /> | Mike Lynch | [@baelec](https://github.com/baelec) |
|
681 | | <img src="https://github.com/rodlukas.png?size=72" /> | Lukáš Rod | [@rodlukas](https://github.com/rodlukas) |
|
682 |
|
683 | If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
|
684 |
|
685 | The Font Awesome team:
|
686 |
|
687 | | | Name | GitHub |
|
688 | | :--------------------------------------------------------: | -------------- | -------------------------------------------------- |
|
689 | | <img src="https://github.com/supercodepoet.png?size=72" /> | Travis Chase | [@supercodepoet](https://github.com/supercodepoet) |
|
690 | | <img src="https://github.com/robmadole.png?size=72" /> | Rob Madole | [@robmadole](https://github.com/robmadole) |
|
691 | | <img src="https://github.com/mlwilkerson.png?size=72" /> | Mike Wilkerson | [@mlwilkerson](https://github.com/mlwilkerson) |
|
692 | | <img src="https://github.com/talbs.png?size=72" /> | Brian Talbot | [@talbs](https://github.com/talbs) |
|
693 |
|
694 | ## Releasing this project (only project owners can do this)
|
695 |
|
696 | See [DEVELOPMENT.md](DEVELOPMENT.md#release)
|