-
Notifications
You must be signed in to change notification settings - Fork 139
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add info on new icon component (#3079)
- Loading branch information
Showing
1 changed file
with
73 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,15 +3,84 @@ title: Fern | Using Font Awesome icons or custom icons in Fern Docs | |
description: Use and style the 26,000+ icons available in the Font Awesome icon library in your Fern Docs. Fern also supports custom icons on its Business plan. | ||
--- | ||
|
||
The `Icon` component is used to display and style an icon. We use Font Awesome to power the icons within Fern Docs. | ||
|
||
[Font Awesome](https://fontawesome.com/) is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. We use Font Awesome to power the icons within Fern Docs. | ||
Icon props: | ||
|
||
You can pick from the 26,000+ icons available and then apply a style, color, size, or animation to them. | ||
- *icon*: string - Font Awesome icon | ||
- *color*: string - icon CSS color, such as `"green"` or `"#008000"` | ||
- *size*: `{`integer`}` - icon size | ||
|
||
Example: | ||
|
||
<CodeBlock title="Example"> | ||
```mdx | ||
<Icon icon="check" color="green" size={6} /> | ||
``` | ||
</CodeBlock> | ||
|
||
This will render as: | ||
<Icon icon="check" color="green" size={6}/> | ||
|
||
## Set icon and style | ||
|
||
[Font Awesome](https://fontawesome.com/) is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. Fern Docs gives you access to all the icons available under the Font Awesome Pro plan. | ||
|
||
<Callout intent="warn"> | ||
Fern does not support the `SVG+JS` method. | ||
</Callout> | ||
|
||
To set the `icon` type and style, you can use the Font Awesome syntax: | ||
|
||
<CodeBlock title="Example with Font Awesome syntax"> | ||
```mdx | ||
<Icon icon="fa-solid fa-check" color="green" size={6} /> | ||
``` | ||
</CodeBlock> | ||
|
||
This renders as: | ||
<Icon icon="fa-solid fa-check" color="green" size={6} /> | ||
|
||
You can omit the `fa-` prefix, and the default icon style is `fa-solid`. Thus, you can simplify the prop like this: | ||
|
||
<CodeBlock title="Simplified example with default style"> | ||
```mdx | ||
<Icon icon="check" color="green" size={6} /> | ||
``` | ||
</CodeBlock> | ||
|
||
You can use other Font Awesome icon styles: | ||
|
||
<CodeBlock title="Simplified example with light style"> | ||
```mdx | ||
<Icon icon="light check" color="green" size={6} /> | ||
``` | ||
</CodeBlock> | ||
|
||
This renders as: | ||
<Icon icon="light check" color="green" size={6} /> | ||
|
||
View the sidebar at [Font Awesome's icon search page](https://fontawesome.com/search) for available styles. | ||
|
||
### Set icon size | ||
|
||
For the size prop, the value of 1 is equal to 0.25rem, which translates to 4px by default in common browsers. The default size value is 4, which translates to 16x16px. | ||
|
||
For example, to display an icon that's double the default size (36x36px), use `size={8}`: | ||
|
||
<CodeBlock title="Size example"> | ||
```mdx | ||
<Icon icon="check" color="green" size={8} /> | ||
``` | ||
</CodeBlock> | ||
|
||
This renders as: | ||
<Icon icon="check" color="green" size={8} /> | ||
|
||
## Custom icons | ||
|
||
If you'd like to B.Y.O.I. (Bring Your Own Icons), reach out to us at [[email protected]](mailto:[email protected]). This is a paid feature available on our `Business plan`. | ||
|
||
## Styling icons | ||
|
||
Font Awesome icons can be styled to really make your project look its best. You can pick icons that are avaiable under the `Pro` plan. Fern does not support the `SVG+JS` method. | ||
|
||
|