thanthos/Font-Awesome-Pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 5.0.0-beta7

Browse Source
This commit is contained in:
robmadole
2017-09-11 15:11:33 -05:00
committed by Rob Madole
parent 7b4f3db368
commit fceb1b8f6b
105 changed files with 16377 additions and 4208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
packages/fontawesome/README.md
View File

@@ -4,66 +4,25 @@
> "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum"
### npm linking
While we are in are Beta period we won't be publishing packages to npmjs.com.
Instead we are going to recommend [linking](https://docs.npmjs.com/cli/link).
The basic steps of this:
1. Clone the [Font-Awesome-Pro](https://github.com/FortAwesome/Font-Awesome-Pro) repository
1. Tell npm (or yarn) where the packages are
1. Link to the packages in your project
#### Example
Let's say that we've cloned the repository to `~/Development/projects/FortAwesome/Font-Awesome-Pro`.
And let's say that we have a project we'd like to use Font Awesome 5 Pro on in `~/Development/projects/myorg/myapp`.
##### Tell npm (or yarn) where the packages are
### Installation
```
$ cd ~/Development/projects/FortAwesome/Font-Awesome-Pro/packages/fontawesome
$ npm link
$ cd ~/Development/projects/FortAwesome/Font-Awesome-Pro/packages/fontawesome-solid
$ npm link
$ npm i --save @fortawesome/fontawesome
```
If you want the Regular, Light, or Brands styles change directories to those packages and do the same `npm link`.
##### Link to the packages in your project
Or
```
$ cd ~/Development/projects/myorg/myapp
$ npm link @fortawesome/fontawesome
$ npm link @fortawesome/fontawesome-solid
$ yarn add @fortawesome/fontawesome
```
### Copying the packages to your project
Using `npm link` is convenient when the project you are linking to changes
often and you want to easily keep up. It however is not convenient if you are
on a team and sharing a repository with someone else or you have a continuous
integration or continuous delivery service. In these cases the build will fail
when any dependency on `@fortawesome/fontawesome` packages are imported in your
app since the linking is not part of the normal `npm install` or `yarn install`
process.
An alternative to linking is to include the packages in your own project.
#### Example
Let's assume all your app's JavaScript is in `src/js`.
Also grab the free solid style or brands:
```
$ cd ~/Development/projects/myorg/myapp
$ cp ~/Development/projects/FortAwesome/Font-Awesome-Pro/packages/fontawesome/index.js ./src/js/fontawesome.js
$ cp ~/Development/projects/FortAwesome/Font-Awesome-Pro/packages/fontawesome-solid/index.js ./src/js/fontawesome-solid.js
$ yarn add @fortawesome/fontawesome-free-solid
$ yarn add @fortawesome/fontawesome-free-brands
```
This is kinda gross but until we get packaging setup for our Pro users this will get you by.
## Let's get started
Once you have the packages installed (make sure you get `fontawesome` and at
@@ -71,7 +30,7 @@ least one of the styles) you can require or import the library. We're going to g
```javascript
import fontawesome from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome-free-solid'
fontawesome.icon(faUser)
```
@@ -85,11 +44,9 @@ From the beginning Font Awesome has used hyphenated names like `fa-address-book`
JavaScript does not typically use this kind of naming scheme; it uses camelCase. So here are some basic examples of
how imports will work.
* `fa-address-book` becomes `import { faAddressBook } from '@fortawesome/fontawesome-solid'`
* `fa-facebook` becomes `import { faFacebookF } from '@fortawesome/fontawesome-brands'` (it's in the Brands style and this was renamed to facebook-f)
* `fa-circle-o` becomes `import { faCircle } from '@fortawesome/fontawesome-regular'` (the outlines are in the Regular style)
* `fa-area-chart` becomes `import { faChartArea } from '@fortawesome/fontawesome-regular'` (this was renamed)
* `fa-freebsd` becomes `import { faFreebsd } from '@fortawesome/fontawesome-brands'` (OCD-warning: we know it's FreeBSD but consistency/guessability is the goal here)
* `fa-address-book` becomes `import { faAddressBook } from '@fortawesome/fontawesome-free-solid'`
* `fa-facebook` becomes `import { faFacebookF } from '@fortawesome/fontawesome-free-brands'` (it's in the Brands style and this was renamed to facebook-f)
* `fa-freebsd` becomes `import { faFreebsd } from '@fortawesome/fontawesome-free-brands'` (OCD-warning: we know it's FreeBSD but consistency/guessability is the goal here)
## Configuration
@@ -231,13 +188,13 @@ fontawesome.parse.transform('grow-2 left-4 rotate-15')
{
"size": 18,
"x": -4,
"y": 0,
"flipX": false,
"flipY": false,
"rotate": 15
}
```
---
"y": 0,
### `fontawesome.library.add(...iconDefinitions)`
@@ -246,8 +203,8 @@ Pre-registering icon definitions so that do not have to explicitly pass them to
example: explicitly passing the icon:
```javascript
import brands from '@fortawesome/fontawesome-brands'
import { faUser } from '@fortawesome/fontawesome-solid'
import brands from '@fortawesome/fontawesome-free-brands'
import { faUser } from '@fortawesome/fontawesome-free-solid'
fontawesome.icon(faUser)
fontawesome.icon(brands.faFortAwesome)
@@ -256,8 +213,8 @@ fontawesome.icon(brands.faFortAwesome)
example: using the library
```javascript
import brands from '@fortawesome/fontawesome-brands'
import { faUser } from '@fortawesome/fontawesome-solid'
import brands from '@fortawesome/fontawesome-free-brands'
import { faUser } from '@fortawesome/fontawesome-free-solid'
fontawesome.library.add(brands, faUser)
@@ -323,7 +280,7 @@ Simple:
```javascript
import fontawesome from '@fortawesome/fontawesome'
import { faPlus } from '@fortaewsome/fontawesome-solid'
import { faPlus } from '@fortaewsome/fontawesome-free-solid'
const faPlusIcon = fontawesome.icon(faPlus)
```
@@ -403,7 +360,7 @@ If you need help figuring out what the transform use `fontawesome.parse.transfor
Compose another icon with the main icon:
```javascript
import { faPlus, faCircle } from '@fortawesome/fontawesome-solid'
import { faPlus, faCircle } from '@fortawesome/fontawesome-free-solid'
fontawesome.icon(faPlus, {
compose: faCircle
@@ -524,7 +481,7 @@ If you would like to disable automatic replacement of `<i>` tags set the configu
}
</script>
<script src="js/fontawesome.js"></script>
<script src="js/packs/fontawesome-solid.js"></script>
<script src="js/packs/solid.js"></script>
</head>
```

648
packages/fontawesome/index.es.js
View File

File diff suppressed because one or more lines are too long

648
packages/fontawesome/index.js
View File

File diff suppressed because one or more lines are too long

2
packages/fontawesome/package.json
View File

@@ -4,6 +4,6 @@
"repository": "https://github.com/FortAwesome/Font-Awesome-Pro",
"jsnext:main": "index.es.js",
"license": "MIT",
"version": "0.0.10",
"version": "0.0.14",
"name": "@fortawesome/fontawesome"
}