From f3a65144582c10222472e98c718d475a87176fd4 Mon Sep 17 00:00:00 2001 From: Marek Suscak Date: Thu, 27 Sep 2018 23:53:45 +0200 Subject: [PATCH 1/2] Document importing SVGs as React components --- packages/react-scripts/template/README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 9507f2c02e8..1039d39798f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -659,6 +659,26 @@ 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).
An alternative way of handling static assets is described in the next section. +### Adding SVGs + +One way to add SVG files was described in the section above. However `react-scripts@2.0.0` added an ability to import SVGs as React components through the fantastic [@svgr/webpack](https://github.com/smooth-code/svgr/tree/master/packages/webpack). You can use either of the two approaches. In your code it would look like: + +```js +import logoUrl, { ReactComponent as Logo } from './logo.svg' + +console.log(logoUrl); // /logo.84287d09.svg + +const App = () => ( +
+ {/* logoUrl is the URL of your SVG file */} + Logo + + {/* Logo is an actual React component */} + +
+) +``` + ## Using the `public` Folder > Note: this feature is available with `react-scripts@0.5.0` and higher. From 58d7c961d7f2585fd624467d6ef15415cd099616 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 1 Oct 2018 15:06:09 +0100 Subject: [PATCH 2/2] Update README.md --- packages/react-scripts/template/README.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 1039d39798f..298205e697b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -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) @@ -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) @@ -661,24 +661,23 @@ An alternative way of handling static assets is described in the next section. ### Adding SVGs -One way to add SVG files was described in the section above. However `react-scripts@2.0.0` added an ability to import SVGs as React components through the fantastic [@svgr/webpack](https://github.com/smooth-code/svgr/tree/master/packages/webpack). You can use either of the two approaches. In your code it would look like: +> Note: this feature is available with `react-scripts@2.0.0` and higher. -```js -import logoUrl, { ReactComponent as Logo } from './logo.svg' +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: -console.log(logoUrl); // /logo.84287d09.svg +```js +import { ReactComponent as Logo } from './logo.svg' const App = () => (
- {/* logoUrl is the URL of your SVG file */} - Logo - {/* Logo is an actual React component */}
-) +); ``` +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.