examples: add svg-components (#982)

Author: stephenmathieson

examples/svg-components/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [ "next/babel" ],
+  "plugins": [ "inline-react-svg" ]
+}

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.

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"
+  }
+}

examples/svg-components/pages/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import Cat from '../svgs/cat.svg'
+
+export default () => (
+  <div className='container'>
+    <marquee>SVG Cat!</marquee>
+    <Cat />
+    <style jsx>{`
+      .container {
+        width: 600px;
+        margin: 100px auto;
+      }
+    `}</style>
+  </div>
+)