Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document adding SVGs as React components #5147

Merged
merged 2 commits into from
Oct 1, 2018
Merged

Document adding SVGs as React components #5147

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3a6514
Document importing SVGs as React components
mareksuscak Sep 27, 2018
58d7c96
Update README.md
gaearon Oct 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -83,7 +84,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Static Server](#static-server)
- [Other Solutions](#other-solutions)
- [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
- [Service Worker Considerations](#service-worker-considerations)
- [Building for Relative Paths](#building-for-relative-paths)
- [Customizing Environment Variables for Arbitrary Build Environments](#customizing-environment-variables-for-arbitrary-build-environments)
- [Azure](#azure)
Expand Down Expand Up @@ -659,6 +659,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 `react-scripts@2.0.0` 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 `react-scripts@0.5.0` and higher.
Expand Down