diff --git a/examples/svg-components/.babelrc b/examples/svg-components/.babelrc new file mode 100644 index 0000000000000..b8a759ccadb49 --- /dev/null +++ b/examples/svg-components/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": [ "next/babel" ], + "plugins": [ "inline-react-svg" ] +} diff --git a/examples/svg-components/README.md b/examples/svg-components/README.md new file mode 100644 index 0000000000000..86c0c1682ae69 --- /dev/null +++ b/examples/svg-components/README.md @@ -0,0 +1,28 @@ + +# SVG components example + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/svg-components +cd svg-components +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example uses a custom `.babelrc` to add support for importing `.svg` files and rendering them as React components. [babel-plugin-inline-react-svg](https://www.npmjs.com/package/babel-plugin-inline-react-svg) is used to handle transpiling the SVGs. diff --git a/examples/svg-components/package.json b/examples/svg-components/package.json new file mode 100644 index 0000000000000..c744ec882f93b --- /dev/null +++ b/examples/svg-components/package.json @@ -0,0 +1,15 @@ +{ + "name": "svg-components", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "beta" + }, + "devDependencies": { + "babel-plugin-inline-react-svg": "^0.2.0" + } +} diff --git a/examples/svg-components/pages/index.js b/examples/svg-components/pages/index.js new file mode 100644 index 0000000000000..88e57a42aaa40 --- /dev/null +++ b/examples/svg-components/pages/index.js @@ -0,0 +1,15 @@ +import React from 'react' +import Cat from '../svgs/cat.svg' + +export default () => ( +
+ SVG Cat! + + +
+) diff --git a/examples/svg-components/svgs/cat.svg b/examples/svg-components/svgs/cat.svg new file mode 100644 index 0000000000000..45735743d14b4 --- /dev/null +++ b/examples/svg-components/svgs/cat.svg @@ -0,0 +1,17 @@ + + + + + + +