adding a script to generate react components from svg files (#233)

unlock-protocol · Sep 8, 2018 · 9b9500c · 9b9500c
1 parent b51a236
commit 9b9500c
Show file tree

Hide file tree

Showing 17 changed files with 888 additions and 1 deletion.
diff --git a/unlock-app/npm-shrinkwrap.json b/unlock-app/npm-shrinkwrap.json
diff --git a/unlock-app/package.json b/unlock-app/package.json
@@ -21,6 +21,7 @@
     "web3-utils": "^1.0.0-beta.34"
   },
   "devDependencies": {
+    "@svgr/cli": "^2.3.0",
     "@storybook/react": "^3.4.10",
     "babel-core": "^6.26.3",
     "enzyme": "^3.4.0",
@@ -59,6 +60,7 @@
     "eject": "react-scripts eject",
     "lint": "./node_modules/eslint/bin/eslint.js .",
     "storybook": "start-storybook -p 9001 -c .storybook",
-    "svg-sprite": "./node_modules/svg-sprite/bin/svg-sprite.js --dest public/ public/images/icons/*.svg --defs"
+    "svg-sprite": "./node_modules/svg-sprite/bin/svg-sprite.js --dest public/ public/images/icons/*.svg --defs",
+    "svg-2-components": "./node_modules/@svgr/cli/bin/svgr --icon -d src/components/interface/icons/ public/images/icons/"
   }
 }
diff --git a/unlock-app/src/components/interface/icons/About.js b/unlock-app/src/components/interface/icons/About.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const About = props => (
+  <svg viewBox="0 0 24 24" width="1em" height="1em" {...props}>
+    <path
+      fill="#A6A6A6"
+      d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm1.2 18h-2.4v-7.2h2.4V18zm0-9.6h-2.4V6h2.4v2.4z"
+    />
+  </svg>
+)
+
+export default About
diff --git a/unlock-app/src/components/interface/icons/Code.js b/unlock-app/src/components/interface/icons/Code.js
@@ -0,0 +1,44 @@
+import React from 'react'
+
+const Code = props => (
+  <svg
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <defs>
+      <circle id="a" cx={12} cy={12} r={12} />
+      <path
+        id="c"
+        d="M15.9 7.224l-3.331 3.668a.332.332 0 0 1-.47.022.334.334 0 0 1-.023-.47L15.202 7l-3.126-3.442a.334.334 0 0 1 .493-.448l3.33 3.665a.334.334 0 0 1 0 .45zm-9.586 6.538a.333.333 0 1 1-.638-.191L9.672.237a.334.334 0 0 1 .638.191L6.314 13.763zm-2.427-2.849a.331.331 0 0 1-.47-.022L.087 7.225a.334.334 0 0 1 0-.449l3.33-3.667a.333.333 0 0 1 .493.448L.783 7.001l3.127 3.441a.334.334 0 0 1-.023.471z"
+      />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <mask id="b" fill="#fff">
+        <use xlinkHref="#a" />
+      </mask>
+      <use fill="#EEE" xlinkHref="#a" />
+      <g fill="#EEE" mask="url(#b)">
+        <path d="M0 0h24v24H0z" />
+      </g>
+      <g transform="translate(4 5)">
+        <mask id="d" fill="#fff">
+          <use xlinkHref="#c" />
+        </mask>
+        <use
+          fill="#A6A6A6"
+          stroke="#979797"
+          strokeWidth={0.25}
+          xlinkHref="#c"
+        />
+        <g fill="#A6A6A6" mask="url(#d)">
+          <path d="M-4-5h24v24H-4z" />
+        </g>
+      </g>
+    </g>
+  </svg>
+)
+
+export default Code
diff --git a/unlock-app/src/components/interface/icons/Copy.js b/unlock-app/src/components/interface/icons/Copy.js
@@ -0,0 +1,30 @@
+import React from 'react'
+
+const Copy = props => (
+  <svg
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <defs>
+      <circle id="a" cx={12} cy={12} r={12} />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <mask id="b" fill="#fff">
+        <use xlinkHref="#a" />
+      </mask>
+      <use fill="#EEE" xlinkHref="#a" />
+      <g fill="#EEE" mask="url(#b)">
+        <path d="M0 0h24v24H0z" />
+      </g>
+      <path
+        fill="#A6A6A6"
+        d="M17.625 16.25c-.207 0-.375.504-.375.343V6.625h-1.888c.002.033.013.064.013.097v.486c0 .162-.168.292-.375.292H9c-.207 0-.375-.13-.375-.292v-.486c0-.033.01-.064.013-.097H6.75v10.792h10.5v-.875c0-.161.168-.292.375-.292s.375.13.375.292v1.167c0 .16-.168.291-.375.291H6.375C6.168 18 6 17.87 6 17.709V6.333c0-.16.168-.292.375-.292h2.424c.302-.586.97-1.033 1.743-1.137C10.695 4.387 11.289 4 12 4c.71 0 1.305.387 1.458.904.772.104 1.44.551 1.743 1.137h2.424c.207 0 .375.131.375.292v10.26c0 .161-.168-.343-.375-.343zm-3-9.528c0-.65-.729-1.264-1.5-1.264-.207 0-.375-.13-.375-.291 0-.322-.336-.584-.75-.584s-.75.262-.75.584c0 .161-.168.291-.375.291-.771 0-1.5.614-1.5 1.264v.194h5.25v-.194zM9 14.583c0-.276.122-.5.272-.5h3.801c.15 0 .272.224.272.5 0 .277-.122.5-.272.5H9.272c-.15 0-.272-.223-.272-.5zM9 12.5c0-.276.122-.5.272-.5h5.43c.15 0 .272.224.272.5 0 .277-.122.5-.272.5h-5.43c-.15 0-.272-.223-.272-.5zm5.702-1.5h-5.43c-.15 0-.272-.223-.272-.5 0-.276.122-.5.272-.5h5.43c.15 0 .272.224.272.5 0 .277-.122.5-.272.5z"
+      />
+    </g>
+  </svg>
+)
+
+export default Copy
diff --git a/unlock-app/src/components/interface/icons/Download.js b/unlock-app/src/components/interface/icons/Download.js
@@ -0,0 +1,32 @@
+import React from 'react'
+
+const Download = props => (
+  <svg
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <defs>
+      <circle id="a" cx={12} cy={12} r={12} />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <mask id="b" fill="#fff">
+        <use xlinkHref="#a" />
+      </mask>
+      <use fill="#EEE" xlinkHref="#a" />
+      <g fill="#EEE" mask="url(#b)">
+        <path d="M0 0h24v24H0z" />
+      </g>
+      <path
+        fill="#A6A6A6"
+        stroke="#979797"
+        strokeWidth={0.25}
+        d="M16.182 16.283a.453.453 0 0 1-.04.003c-.153 0-.286-.106-.306-.25-.022-.157.099-.3.268-.32 1.757-.204 3.134-1.631 3.134-3.249 0-1.79-1.565-3.246-3.488-3.246a2.03 2.03 0 0 0-.206.01.313.313 0 0 1-.328-.19c-.556-1.477-2.058-2.47-3.736-2.47-2.185 0-3.963 1.655-3.963 3.689 0 .17.016.346.049.533a.285.285 0 0 1-.208.316c-1.04.32-1.739 1.22-1.739 2.242 0 1.303 1.138 2.363 2.538 2.363h.557c.171 0 .31.128.31.286 0 .158-.139.286-.31.286h-.557C6.417 16.286 5 14.969 5 13.35c0-1.187.762-2.244 1.92-2.7a3.46 3.46 0 0 1-.022-.391C6.898 7.91 8.954 6 11.48 6c1.863 0 3.537 1.056 4.238 2.65h.032c2.265 0 4.107 1.712 4.107 3.817 0 1.9-1.614 3.576-3.675 3.816zm-5.392.13l1.329 1.441v-5.233c0-.186.139-.336.31-.336.17 0 .31.15.31.336v5.233l1.328-1.441a.292.292 0 0 1 .438 0 .356.356 0 0 1 0 .475l-1.858 2.014a.309.309 0 0 1-.218.098.309.309 0 0 1-.219-.098l-1.857-2.014a.356.356 0 0 1 0-.475.292.292 0 0 1 .437 0z"
+      />
+    </g>
+  </svg>
+)
+
+export default Download
diff --git a/unlock-app/src/components/interface/icons/Edit.js b/unlock-app/src/components/interface/icons/Edit.js
@@ -0,0 +1,39 @@
+import React from 'react'
+
+const Edit = props => (
+  <svg
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <defs>
+      <circle id="a" cx={12} cy={12} r={12} />
+      <path
+        id="c"
+        d="M11.235 5.012l-6.606 6.61a.6.6 0 0 1-.235.145L.79 12.969a.598.598 0 0 1-.76-.76l1.201-3.606a.6.6 0 0 1 .145-.234l6.605-6.61c.461-.462.99-.723 1.53-.755.43-.027 1.2-.079 1.87.592.661.662.644 1.474.613 1.9-.038.534-.301 1.057-.76 1.516zm-.583-2.659c-.327-.329-.656-.486-.953-.465-.35.02-.663.264-.863.465L1.964 9.472v1.581h1.715l6.942-6.914c.202-.203.447-.516.473-.865.021-.297-.127-.607-.442-.921z"
+      />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <mask id="b" fill="#fff">
+        <use xlinkHref="#a" />
+      </mask>
+      <use fill="#EEE" xlinkHref="#a" />
+      <g fill="#EEE" mask="url(#b)">
+        <path d="M0 0h24v24H0z" />
+      </g>
+      <g transform="translate(6 5)">
+        <mask id="d" fill="#fff">
+          <use xlinkHref="#c" />
+        </mask>
+        <use fill="#A6A6A6" xlinkHref="#c" />
+        <g fill="#A6A6A6" mask="url(#d)">
+          <path d="M-6-5h24v24H-6z" />
+        </g>
+      </g>
+    </g>
+  </svg>
+)
+
+export default Edit
diff --git a/unlock-app/src/components/interface/icons/Eth.js b/unlock-app/src/components/interface/icons/Eth.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Eth = props => (
+  <svg viewBox="0 0 7 11" width="1em" height="1em" {...props}>
+    <path
+      d="M1 6V5h5v1H1zm-1 5v-1h7v1H0zM0 1V0h7v1H0z"
+      fill="#333"
+      fillRule="evenodd"
+    />
+  </svg>
+)
+
+export default Eth
diff --git a/unlock-app/src/components/interface/icons/EthSub.js b/unlock-app/src/components/interface/icons/EthSub.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const EthSub = props => (
+  <svg viewBox="0 0 7 11" width="1em" height="1em" {...props}>
+    <path
+      d="M1 6V5h5v1H1zm-1 5v-1h7v1H0zM0 1V0h7v1H0z"
+      fill="#a6a6a6"
+      fillRule="evenodd"
+    />
+  </svg>
+)
+
+export default EthSub
diff --git a/unlock-app/src/components/interface/icons/Etherscan.js b/unlock-app/src/components/interface/icons/Etherscan.js
@@ -0,0 +1,30 @@
+import React from 'react'
+
+const Etherscan = props => (
+  <svg
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <defs>
+      <circle id="a" cx={12} cy={12} r={12} />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <mask id="b" fill="#fff">
+        <use xlinkHref="#a" />
+      </mask>
+      <use fill="#EEE" xlinkHref="#a" />
+      <g fill="#EEE" mask="url(#b)">
+        <path d="M0 0h24v24H0z" />
+      </g>
+      <path
+        fill="#A6A6A6"
+        d="M17.555 18h-2.222a.333.333 0 1 1 0-.667h2.222a.779.779 0 0 0 .778-.777v-2.223a.333.333 0 1 1 .667 0v2.223c0 .796-.648 1.444-1.445 1.444zm1.112-9a.333.333 0 0 1-.334-.333V6.445a.779.779 0 0 0-.778-.778h-2.222a.333.333 0 1 1 0-.667h2.222C18.352 5 19 5.648 19 6.445v2.222a.333.333 0 0 1-.333.333zM16 8.292v6.416c0 .161-.112.292-.25.292h-.5c-.138 0-.25-.13-.25-.292V8.292c0-.161.112-.292.25-.292h.5c.138 0 .25.13.25.292zM13.5 15c-.277 0-.5-.13-.5-.292V8.292c0-.161.223-.292.5-.292s.5.13.5.292v6.416c0 .161-.223.292-.5.292zm-1 0c-.277 0-.5-.13-.5-.292V8.292c0-.161.223-.292.5-.292s.5.13.5.292v6.416c0 .161-.223.292-.5.292zm-1.75 0h-.5c-.138 0-.25-.13-.25-.292V8.292c0-.161.112-.292.25-.292h.5c.138 0 .25.13.25.292v6.416c0 .161-.112.292-.25.292zM8.5 15c-.277 0-.5-.13-.5-.292V8.292C8 8.131 8.223 8 8.5 8s.5.13.5.292v6.416c0 .161-.223.292-.5.292zm-.75-9.333H6.083c-.321 0-.583.349-.583.778v2.222c0 .184-.112.333-.25.333S5 8.85 5 8.667V6.445C5 5.648 5.486 5 6.083 5H7.75c.138 0 .25.15.25.333 0 .185-.112.334-.25.334zM5.25 14c.138 0 .25.15.25.333v2.223c0 .429.262.777.583.777H7.75c.138 0 .25.15.25.334 0 .184-.112.333-.25.333H6.083C5.486 18 5 17.352 5 16.556v-2.223c0-.184.112-.333.25-.333z"
+      />
+    </g>
+  </svg>
+)
+
+export default Etherscan
diff --git a/unlock-app/src/components/interface/icons/Export.js b/unlock-app/src/components/interface/icons/Export.js
@@ -0,0 +1,44 @@
+import React from 'react'
+
+const Export = props => (
+  <svg
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <defs>
+      <circle id="a" cx={12} cy={12} r={12} />
+      <path
+        id="c"
+        d="M13.417 14H.583A.584.584 0 0 1 0 13.417V9.333a.292.292 0 1 1 .583 0v4.084h12.834V9.333a.292.292 0 1 1 .583 0v4.084a.584.584 0 0 1-.583.583zm-6.201-3.595l-.006.004a.296.296 0 0 1-.069.05l-.025.017a.29.29 0 0 1-.232 0c-.01-.005-.016-.012-.025-.017a.302.302 0 0 1-.07-.05c0-.002-.003-.002-.005-.004L3.868 7.196a.292.292 0 0 1 .431-.392l2.41 2.65V.292a.292.292 0 1 1 .583 0v9.162L9.7 6.804a.292.292 0 0 1 .432.392l-2.917 3.209z"
+      />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <mask id="b" fill="#fff">
+        <use xlinkHref="#a" />
+      </mask>
+      <use fill="#EEE" xlinkHref="#a" />
+      <g fill="#EEE" mask="url(#b)">
+        <path d="M0 0h24v24H0z" />
+      </g>
+      <g transform="translate(5 4)">
+        <mask id="d" fill="#fff">
+          <use xlinkHref="#c" />
+        </mask>
+        <use
+          fill="#A6A6A6"
+          stroke="#979797"
+          strokeWidth={0.25}
+          xlinkHref="#c"
+        />
+        <g fill="#A6A6A6" mask="url(#d)">
+          <path d="M-5-4h24v24H-5z" />
+        </g>
+      </g>
+    </g>
+  </svg>
+)
+
+export default Export
diff --git a/unlock-app/src/components/interface/icons/Github.js b/unlock-app/src/components/interface/icons/Github.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Github = props => (
+  <svg viewBox="0 0 24 24" width="1em" height="1em" {...props}>
+    <path
+      fill="#A6A6A6"
+      d="M12 0C5.372 0 0 5.508 0 12.305c0 5.435 3.438 10.047 8.207 11.674.6.113.82-.267.82-.593 0-.292-.011-1.066-.017-2.093-3.339.744-4.043-1.65-4.043-1.65-.545-1.42-1.332-1.798-1.332-1.798-1.09-.764.083-.749.083-.749 1.203.087 1.837 1.268 1.837 1.268 1.071 1.88 2.809 1.338 3.493 1.022.109-.795.42-1.337.762-1.645-2.665-.31-5.466-1.365-5.466-6.08 0-1.343.467-2.442 1.235-3.302-.123-.311-.535-1.562.117-3.256 0 0 1.008-.33 3.3 1.261a11.241 11.241 0 0 1 3.005-.414c1.019.005 2.046.141 3.004.414 2.29-1.592 3.297-1.261 3.297-1.261.654 1.694.242 2.945.119 3.256.77.86 1.233 1.959 1.233 3.302 0 4.726-2.805 5.767-5.478 6.071.43.38.814 1.13.814 2.279 0 1.645-.015 2.971-.015 3.375 0 .329.216.712.825.591 4.765-1.63 8.2-6.239 8.2-11.672C24 5.508 18.627 0 12 0"
+    />
+  </svg>
+)
+
+export default Github
diff --git a/unlock-app/src/components/interface/icons/Infinity.js b/unlock-app/src/components/interface/icons/Infinity.js
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const Infinity = props => (
+  <svg viewBox="0 0 16 11" width="1em" height="1em" {...props}>
+    <text
+      fill="#333"
+      fillRule="evenodd"
+      fontFamily="IBMPlexMono-Light, IBM Plex Mono Light"
+      fontSize={16}
+      letterSpacing={-3.2}
+    >
+      <tspan x={0.044} y={10}>
+        o
+      </tspan>
+      <tspan x={6.444} y={10} letterSpacing={-0.044}>
+        o
+      </tspan>
+    </text>
+  </svg>
+)
+
+export default Infinity
diff --git a/unlock-app/src/components/interface/icons/Jobs.js b/unlock-app/src/components/interface/icons/Jobs.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Jobs = props => (
+  <svg viewBox="0 0 24 24" width="1em" height="1em" {...props}>
+    <path
+      fill="#A6A6A6"
+      fillRule="evenodd"
+      d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm6.125-17.056h-3.5v-.833c0-.46-.684-1.111-1.167-1.111h-2.916c-.483 0-1.167.652-1.167 1.111v.833h-3.5c-.482 0-.875.374-.875.834V10h14V7.778c0-.46-.393-.834-.875-.834zM11 7.25a.25.25 0 0 1 .25-.25h2.5a.25.25 0 0 1 .25.25V8h-3v-.75zM16.083 11H5v5.1c0 .496.393.9.875.9h12.25a.889.889 0 0 0 .875-.9V11h-2.917z"
+    />
+  </svg>
+)
+
+export default Jobs
diff --git a/unlock-app/src/components/interface/icons/Unlock.js b/unlock-app/src/components/interface/icons/Unlock.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Unlock = props => (
+  <svg viewBox="0 0 56 56" width="1em" height="1em" {...props}>
+    <g fill="none" fillRule="evenodd">
+      <rect width={56} height={56} fill="#ED6E82" rx={28} />
+      <path
+        fill="#FFF"
+        d="M33.467 30.455c0 .365-.02.733-.07 1.095-.434 3.2-3.945 5.285-7.054 4.192-2.274-.799-3.7-2.769-3.7-5.134-.002-1.62-.002-3.241-.002-4.862h10.828c0 1.57 0 3.139-.002 4.709m6.719-14.07V16H33.41v6.61H22.58l.001-6.228v-.374h-6.753c-.006.08-.014.139-.014.197 0 2.135-.005 4.27-.008 6.405H14v3.14h1.806c.001 1.7.006 3.4.02 5.1.03 3.36 1.456 6.143 4.099 8.243 3.811 3.029 8.114 3.673 12.708 2.016 4.35-1.569 7.612-5.66 7.563-10.643a525.27 525.27 0 0 1-.023-4.716H42v-3.14h-1.825c.004-2.075.01-4.15.01-6.225"
+      />
+    </g>
+  </svg>
+)
+
+export default Unlock
diff --git a/unlock-app/src/components/interface/icons/Upload.js b/unlock-app/src/components/interface/icons/Upload.js
@@ -0,0 +1,32 @@
+import React from 'react'
+
+const Upload = props => (
+  <svg
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <defs>
+      <circle id="a" cx={12} cy={12} r={12} />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <mask id="b" fill="#fff">
+        <use xlinkHref="#a" />
+      </mask>
+      <use fill="#EEE" xlinkHref="#a" />
+      <g fill="#EEE" mask="url(#b)">
+        <path d="M0 0h24v24H0z" />
+      </g>
+      <path
+        fill="#A6A6A6"
+        stroke="#979797"
+        strokeWidth={0.25}
+        d="M17.45 18h-9.9c-.303 0-.55-.23-.55-.514V9.514C7 9.231 7.247 9 7.55 9h3.025c.152 0 .275.115.275.257 0 .142-.123.257-.275.257H7.55v7.972h9.9V9.514h-3.025c-.152 0-.275-.115-.275-.257 0-.142.123-.257.275-.257h3.025c.303 0 .55.23.55.514v7.972c0 .283-.247.514-.55.514zM14.056 7.166a.27.27 0 0 1-.192-.08l-1.165-1.162v7.472a.27.27 0 0 1-.543 0V5.924l-1.165 1.163a.271.271 0 0 1-.384-.383l1.628-1.625a.272.272 0 0 1 .385 0l1.628 1.625a.27.27 0 0 1-.192.462z"
+      />
+    </g>
+  </svg>
+)
+
+export default Upload