examples: add svg-components (vercel#982)

stephenmathieson · timneutkens · commit 8cf965a753a6 · 2017-03-15T15:26:08.000+01:00
diff --git a/examples/svg-components/.babelrc 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
@@ -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
@@ -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
@@ -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>
+)
diff --git a/examples/svg-components/svgs/cat.svg b/examples/svg-components/svgs/cat.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- taken from https://commons.wikimedia.org/wiki/File:Cat_silhouette.svg -->
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.0"
+   width="400"
+   height="380"
+   id="svg2">
+  <defs
+     id="defs5" />
+  <path
+     d="M 151.34904,307.20455 L 264.34904,307.20455 C 264.34904,291.14096 263.2021,287.95455 236.59904,287.95455 C 240.84904,275.20455 258.12424,244.35808 267.72404,244.35808 C 276.21707,244.35808 286.34904,244.82592 286.34904,264.20455 C 286.34904,286.20455 323.37171,321.67547 332.34904,307.20455 C 345.72769,285.63897 309.34904,292.21514 309.34904,240.20455 C 309.34904,169.05135 350.87417,179.18071 350.87417,139.20455 C 350.87417,119.20455 345.34904,116.50374 345.34904,102.20455 C 345.34904,83.30695 361.99717,84.403577 358.75805,68.734879 C 356.52061,57.911656 354.76962,49.23199 353.46516,36.143889 C 352.53959,26.857305 352.24452,16.959398 342.59855,17.357382 C 331.26505,17.824992 326.96549,37.77419 309.34904,39.204549 C 291.76851,40.631991 276.77834,24.238028 269.97404,26.579549 C 263.22709,28.901334 265.34904,47.204549 269.34904,60.204549 C 275.63588,80.636771 289.34904,107.20455 264.34904,111.20455 C 239.34904,115.20455 196.34904,119.20455 165.34904,160.20455 C 134.34904,201.20455 135.49342,249.3212 123.34904,264.20455 C 82.590696,314.15529 40.823919,293.64625 40.823919,335.20455 C 40.823919,353.81019 72.349045,367.20455 77.349045,361.20455 C 82.349045,355.20455 34.863764,337.32587 87.995492,316.20455 C 133.38711,298.16014 137.43914,294.47663 151.34904,307.20455 z "
+     style="fill:black;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     id="path1891" />
+</svg>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "presets": [ "next/babel" ],
 +  "plugins": [ "inline-react-svg" ]
 +}