Add React and Vue components

package.json

@@ -4,15 +4,25 @@
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
-    "svgo": "^1.3.2"
+    "@svgr/cli": "^5.4.0",
+    "@svgr/core": "^5.4.0",
+    "camelcase": "^6.0.0",
+    "dedent": "^0.7.0",
+    "rimraf": "^3.0.2",
+    "svg-to-vue": "^0.7.0",
+    "svgo": "^1.3.2",
+    "vue-template-compiler": "^2.6.11"
   },
   "scripts": {
     "prepare": "npm run build",
-    "build": "npm run build-outline && npm run build-solid",
+    "build": "npm run build-outline && npm run build-solid && npm run build-react && npm run build-vue",
+    "build-react": "svgr -d react/outline outline && svgr -d react/solid solid",
+    "build-vue": "node ./scripts/build-vue.js",
     "build-outline": "svgo --config=svgo.outline.yaml -f ./src/outline -o ./outline --pretty --indent=2",
     "build-solid": "svgo --config=svgo.solid.yaml -f ./src/solid -o ./solid --pretty --indent=2"
   },
   "files": [
+    "react/",
     "outline/",
     "solid/"
   ]

react/outline/Adjustments.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgAdjustments(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+      />
+    </svg>
+  )
+}
+
+export default SvgAdjustments

react/outline/Annotation.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgAnnotation(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
+      />
+    </svg>
+  )
+}
+
+export default SvgAnnotation

react/outline/Archive.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArchive(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+      />
+    </svg>
+  )
+}
+
+export default SvgArchive

react/outline/ArrowCircleDown.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowCircleDown(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowCircleDown

react/outline/ArrowCircleLeft.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowCircleLeft(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowCircleLeft

react/outline/ArrowCircleRight.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowCircleRight(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowCircleRight

react/outline/ArrowCircleUp.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowCircleUp(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowCircleUp

react/outline/ArrowDown.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowDown(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M19 14l-7 7m0 0l-7-7m7 7V3"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowDown

react/outline/ArrowLeft.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowLeft(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M10 19l-7-7m0 0l7-7m-7 7h18"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowLeft

react/outline/ArrowNarrowDown.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowNarrowDown(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M16 17l-4 4m0 0l-4-4m4 4V3"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowNarrowDown

react/outline/ArrowNarrowLeft.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowNarrowLeft(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M7 16l-4-4m0 0l4-4m-4 4h18"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowNarrowLeft

react/outline/ArrowNarrowRight.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowNarrowRight(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M17 8l4 4m0 0l-4 4m4-4H3"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowNarrowRight

react/outline/ArrowNarrowUp.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowNarrowUp(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 7l4-4m0 0l4 4m-4-4v18"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowNarrowUp

react/outline/ArrowRight.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowRight(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M14 5l7 7m0 0l-7 7m7-7H3"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowRight

react/outline/ArrowUp.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgArrowUp(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M5 10l7-7m0 0l7 7m-7-7v18"
+      />
+    </svg>
+  )
+}
+
+export default SvgArrowUp

react/outline/AtSymbol.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgAtSymbol(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
+      />
+    </svg>
+  )
+}
+
+export default SvgAtSymbol

react/outline/BadgeCheck.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgBadgeCheck(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+      />
+    </svg>
+  )
+}
+
+export default SvgBadgeCheck

react/outline/Ban.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgBan(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+      />
+    </svg>
+  )
+}
+
+export default SvgBan

react/outline/Bell.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgBell(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+      />
+    </svg>
+  )
+}
+
+export default SvgBell

react/outline/BookOpen.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgBookOpen(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+      />
+    </svg>
+  )
+}
+
+export default SvgBookOpen

react/outline/Bookmark.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function SvgBookmark(props) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+      />
+    </svg>
+  )
+}
+
+export default SvgBookmark