forked from facebook/create-react-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Document adding SVGs as React components (facebook#5147)
* Document importing SVGs as React components * Update README.md
- Loading branch information
1 parent
4a96247
commit 9f7f2ab
Showing
1 changed file
with
20 additions
and
0 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 |
---|---|---|
|
@@ -28,6 +28,7 @@ You can find the most recent version of this guide [here](https://github.com/fac | |
- [Adding a Sass stylesheet](#adding-a-sass-stylesheet) | ||
- [Post-Processing CSS](#post-processing-css) | ||
- [Adding Images, Fonts, and Files](#adding-images-fonts-and-files) | ||
- [Adding SVGs](#adding-svgs) | ||
- [Using the `public` Folder](#using-the-public-folder) | ||
- [Changing the HTML](#changing-the-html) | ||
- [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system) | ||
|
@@ -676,6 +677,25 @@ Please be advised that this is also a custom feature of Webpack. | |
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).<br> | ||
An alternative way of handling static assets is described in the next section. | ||
|
||
### Adding SVGs | ||
|
||
> Note: this feature is available with `[email protected]` and higher. | ||
One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this: | ||
|
||
```js | ||
import { ReactComponent as Logo } from './logo.svg' | ||
|
||
const App = () => ( | ||
<div> | ||
{/* Logo is an actual React component */} | ||
<Logo /> | ||
</div> | ||
); | ||
``` | ||
|
||
This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The `ReactComponent` import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename. | ||
|
||
## Using the `public` Folder | ||
|
||
> Note: this feature is available with `[email protected]` and higher. | ||
|