Add instructions to customize SVG framework

Geremia Taglialatela 2019-01-15 23:51:24 +01:00
parent 4a6ff38666
commit b19362901a

@ -4,8 +4,6 @@ So, if you need a new icon in a short while, or you need a comprehensive set of
## The Easy Way ## The Easy Way
⚠️ Only works for CSS. SVG customization is on the To-Do list
There are some wonderful online services which allows you to customize Font Awesome, like: There are some wonderful online services which allows you to customize Font Awesome, like:
- **Fort Awesome**: https://fortawesome.com/ (by **@davegandy**, creator of Font Awesome) - **Fort Awesome**: https://fortawesome.com/ (by **@davegandy**, creator of Font Awesome)
@ -15,6 +13,43 @@ There are some wonderful online services which allows you to customize Font Awes
Pick up the one which better fits your needs. Pick up the one which better fits your needs.
### SVG Framework
⚠️ SVG customization is on the To-Do list, meanwhile please use this approach
Prerequisites:
1. [Webpack](https://webpack.js.org/)
2. Single-path SVG
*Instructions are different for TypeScript*
JavaScript:
```js
import { library, dom } from '@fortawesome/fontawesome-svg-core'
// replace 'M241 241 H 351 V 351 H 241 L 241 241' with your single-path SVG
var faMyCustomIcon = {
prefix: 'fac',
iconName: 'my-custom-icon',
icon: [512, 512, [], 'e001', 'M241 241 H 351 V 351 H 241 L 241 241']
}
library.add(
faMyCustomIcon
)
dom.watch()
```
HTML:
```html
<span class="fac fa-my-custom-icon"></span>
```
Docs: https://fontawesome.com/how-to-use/with-the-api/setup/getting-started
Ref: [#14199](https://github.com/FortAwesome/Font-Awesome/issues/14199)
## The Hard Way ## The Hard Way
⚠️ Outdated information. Please wait for the main repository to reflect FA5 changes ⚠️ Outdated information. Please wait for the main repository to reflect FA5 changes