You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: packages/react-scripts/template/README.md
+20
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
28
28
-[Adding a Sass stylesheet](#adding-a-sass-stylesheet)
29
29
-[Post-Processing CSS](#post-processing-css)
30
30
-[Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
31
+
-[Adding SVGs](#adding-svgs)
31
32
-[Using the `public` Folder](#using-the-public-folder)
32
33
-[Changing the HTML](#changing-the-html)
33
34
-[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.
676
677
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).<br>
677
678
An alternative way of handling static assets is described in the next section.
678
679
680
+
### Adding SVGs
681
+
682
+
> Note: this feature is available with `react-scripts@2.0.0` and higher.
683
+
684
+
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:
685
+
686
+
```js
687
+
import { ReactComponentasLogo } from'./logo.svg'
688
+
689
+
constApp= () => (
690
+
<div>
691
+
{/* Logo is an actual React component */}
692
+
<Logo />
693
+
</div>
694
+
);
695
+
```
696
+
697
+
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.
698
+
679
699
## Using the `public` Folder
680
700
681
701
> Note: this feature is available with `react-scripts@0.5.0` and higher.
0 commit comments