From 0bc410d0a5a3797c9788aaabe108358412a6a96c Mon Sep 17 00:00:00 2001 From: Marco Montalbano Date: Mon, 2 Dec 2019 22:34:37 +0100 Subject: [PATCH] Update website with demo for 'output-components-as-svgstore' --- packages/website/.babelrc | 10 + packages/website/.figmaexportrc.js | 22 +- packages/website/index.scss | 14 +- packages/website/package-lock.json | 262 ++++++++++++++++-- packages/website/package.json | 3 + packages/website/src/CodeBlock.js | 4 +- packages/website/src/GitHubLink.js | 3 +- packages/website/src/Hero.js | 7 +- packages/website/src/index.js | 11 +- .../src/output-components/ComponentsAsES6.js | 18 ++ .../ComponentsAsES6_base64.js} | 21 +- .../ComponentsAsES6_dataUrl.js} | 13 +- .../output-components/ComponentsAsSvgstore.js | 16 ++ .../ComponentsAsSvgstore_default.js | 54 ++++ .../ComponentsAsSvgstore_monochrome.js | 50 ++++ 15 files changed, 445 insertions(+), 63 deletions(-) create mode 100644 packages/website/.babelrc create mode 100644 packages/website/src/output-components/ComponentsAsES6.js rename packages/website/src/{SvgAsES6ComponentBase64.js => output-components/ComponentsAsES6_base64.js} (66%) rename packages/website/src/{SvgAsES6ComponentDataUrl.js => output-components/ComponentsAsES6_dataUrl.js} (82%) create mode 100644 packages/website/src/output-components/ComponentsAsSvgstore.js create mode 100644 packages/website/src/output-components/ComponentsAsSvgstore_default.js create mode 100644 packages/website/src/output-components/ComponentsAsSvgstore_monochrome.js diff --git a/packages/website/.babelrc b/packages/website/.babelrc new file mode 100644 index 00000000..247c6df0 --- /dev/null +++ b/packages/website/.babelrc @@ -0,0 +1,10 @@ +{ + "plugins": [ + ["@babel/plugin-transform-react-jsx", { "pragma":"h", "jsxPragma": "h" }], + ["babel-plugin-jsx-pragmatic", { + "module": "preact", + "import": "h", + "export": "h" + }] + ] +} diff --git a/packages/website/.figmaexportrc.js b/packages/website/.figmaexportrc.js index 07b24dca..449fd287 100644 --- a/packages/website/.figmaexportrc.js +++ b/packages/website/.figmaexportrc.js @@ -25,16 +25,18 @@ module.exports = { output: './output/es6-dataurl', useDataUrl: true, }), - // require('../output-components-as-svgstore')({ - // output: './output/svgstore', - // }), - // require('../output-components-as-svgstore')({ - // output: './output/svgstore-monochrome', - // options: { - // prefix: 'monochrome-', - // cleanSymbols: ['fill'] - // } - // }), + + require('../output-components-as-svgstore')({ + output: './output/svgstore', + }), + + require('../output-components-as-svgstore')({ + output: './output/svgstore-monochrome', + iconPrefix: 'unfilled-', + options: { + cleanSymbols: ['fill'] + } + }), ] }] ] diff --git a/packages/website/index.scss b/packages/website/index.scss index 37ca99f9..bff8cbb9 100644 --- a/packages/website/index.scss +++ b/packages/website/index.scss @@ -12,6 +12,14 @@ $color-link-hover: #1976D2; } } +.text-center { + text-align: center; +} + +.nowrap { + white-space: nowrap; +} + body { margin: 0; font-family: Lato; @@ -181,11 +189,15 @@ pre[class*=language-] { padding: 0 15px; } +.section-block { + margin: 60px 0; +} + .code-block { display: flex; justify-content: space-around; flex-direction: column; - margin: 60px 0 15px 0; + margin: 15px 0; @include for-desktop-up { align-items: center; diff --git a/packages/website/package-lock.json b/packages/website/package-lock.json index 22cf5735..067854a9 100644 --- a/packages/website/package-lock.json +++ b/packages/website/package-lock.json @@ -14,18 +14,18 @@ } }, "@babel/core": { - "version": "7.7.2", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.7.2.tgz", - "integrity": "sha512-eeD7VEZKfhK1KUXGiyPFettgF3m513f8FoBSWiQ1xTvl1RAopLs42Wp9+Ze911I6H0N9lNqJMDgoZT7gHsipeQ==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.7.4.tgz", + "integrity": "sha512-+bYbx56j4nYBmpsWtnPUsKW3NdnYxbqyfrP2w9wILBuHzdfIKz9prieZK0DFPyIzkjYVUe4QkusGL07r5pXznQ==", "dev": true, "requires": { "@babel/code-frame": "^7.5.5", - "@babel/generator": "^7.7.2", - "@babel/helpers": "^7.7.0", - "@babel/parser": "^7.7.2", - "@babel/template": "^7.7.0", - "@babel/traverse": "^7.7.2", - "@babel/types": "^7.7.2", + "@babel/generator": "^7.7.4", + "@babel/helpers": "^7.7.4", + "@babel/parser": "^7.7.4", + "@babel/template": "^7.7.4", + "@babel/traverse": "^7.7.4", + "@babel/types": "^7.7.4", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "json5": "^2.1.0", @@ -35,6 +35,92 @@ "source-map": "^0.5.0" }, "dependencies": { + "@babel/generator": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.4.tgz", + "integrity": "sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==", + "dev": true, + "requires": { + "@babel/types": "^7.7.4", + "jsesc": "^2.5.1", + "lodash": "^4.17.13", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz", + "integrity": "sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.7.4", + "@babel/template": "^7.7.4", + "@babel/types": "^7.7.4" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz", + "integrity": "sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==", + "dev": true, + "requires": { + "@babel/types": "^7.7.4" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz", + "integrity": "sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug==", + "dev": true, + "requires": { + "@babel/types": "^7.7.4" + } + }, + "@babel/parser": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.4.tgz", + "integrity": "sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==", + "dev": true + }, + "@babel/template": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.4.tgz", + "integrity": "sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "@babel/parser": "^7.7.4", + "@babel/types": "^7.7.4" + } + }, + "@babel/traverse": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.4.tgz", + "integrity": "sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.5.5", + "@babel/generator": "^7.7.4", + "@babel/helper-function-name": "^7.7.4", + "@babel/helper-split-export-declaration": "^7.7.4", + "@babel/parser": "^7.7.4", + "@babel/types": "^7.7.4", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.13" + } + }, + "@babel/types": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz", + "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + }, "json5": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.1.tgz", @@ -92,13 +178,26 @@ } }, "@babel/helper-builder-react-jsx": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.7.0.tgz", - "integrity": "sha512-LSln3cexwInTMYYoFeVLKnYPPMfWNJ8PubTBs3hkh7wCu9iBaqq1OOyW+xGmEdLxT1nhsl+9SJ+h2oUDYz0l2A==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.7.4.tgz", + "integrity": "sha512-kvbfHJNN9dg4rkEM4xn1s8d1/h6TYNvajy9L1wx4qLn9HFg0IkTsQi4rfBe92nxrPUFcMsHoMV+8rU7MJb3fCA==", "dev": true, "requires": { - "@babel/types": "^7.7.0", + "@babel/types": "^7.7.4", "esutils": "^2.0.0" + }, + "dependencies": { + "@babel/types": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz", + "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/helper-call-delegate": { @@ -285,14 +384,108 @@ } }, "@babel/helpers": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.7.0.tgz", - "integrity": "sha512-VnNwL4YOhbejHb7x/b5F39Zdg5vIQpUUNzJwx0ww1EcVRt41bbGRZWhAURrfY32T5zTT3qwNOQFWpn+P0i0a2g==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.7.4.tgz", + "integrity": "sha512-ak5NGZGJ6LV85Q1Zc9gn2n+ayXOizryhjSUBTdu5ih1tlVCJeuQENzc4ItyCVhINVXvIT/ZQ4mheGIsfBkpskg==", "dev": true, "requires": { - "@babel/template": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0" + "@babel/template": "^7.7.4", + "@babel/traverse": "^7.7.4", + "@babel/types": "^7.7.4" + }, + "dependencies": { + "@babel/generator": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.4.tgz", + "integrity": "sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==", + "dev": true, + "requires": { + "@babel/types": "^7.7.4", + "jsesc": "^2.5.1", + "lodash": "^4.17.13", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz", + "integrity": "sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.7.4", + "@babel/template": "^7.7.4", + "@babel/types": "^7.7.4" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz", + "integrity": "sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==", + "dev": true, + "requires": { + "@babel/types": "^7.7.4" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz", + "integrity": "sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug==", + "dev": true, + "requires": { + "@babel/types": "^7.7.4" + } + }, + "@babel/parser": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.4.tgz", + "integrity": "sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==", + "dev": true + }, + "@babel/template": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.4.tgz", + "integrity": "sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "@babel/parser": "^7.7.4", + "@babel/types": "^7.7.4" + } + }, + "@babel/traverse": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.4.tgz", + "integrity": "sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.5.5", + "@babel/generator": "^7.7.4", + "@babel/helper-function-name": "^7.7.4", + "@babel/helper-split-export-declaration": "^7.7.4", + "@babel/parser": "^7.7.4", + "@babel/types": "^7.7.4", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.13" + } + }, + "@babel/types": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz", + "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } } }, "@babel/highlight": { @@ -410,9 +603,9 @@ } }, "@babel/plugin-syntax-jsx": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz", - "integrity": "sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.7.4.tgz", + "integrity": "sha512-wuy6fiMe9y7HeZBWXYCGt2RGxZOj0BImZ9EyXJVnVGBKO/Br592rbR3rtIQn0eQhAk9vqaKP5n8tVqEFBQMfLg==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.0.0" @@ -687,14 +880,14 @@ } }, "@babel/plugin-transform-react-jsx": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.0.tgz", - "integrity": "sha512-mXhBtyVB1Ujfy+0L6934jeJcSXj/VCg6whZzEcgiiZHNS0PGC7vUCsZDQCxxztkpIdF+dY1fUMcjAgEOC3ZOMQ==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.4.tgz", + "integrity": "sha512-LixU4BS95ZTEAZdPaIuyg/k8FiiqN9laQ0dMHB4MlpydHY53uQdWCUrwjLr5o6ilS6fAgZey4Q14XBjl5tL6xw==", "dev": true, "requires": { - "@babel/helper-builder-react-jsx": "^7.7.0", + "@babel/helper-builder-react-jsx": "^7.7.4", "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-syntax-jsx": "^7.2.0" + "@babel/plugin-syntax-jsx": "^7.7.4" } }, "@babel/plugin-transform-regenerator": { @@ -1629,6 +1822,21 @@ "object.assign": "^4.1.0" } }, + "babel-plugin-jsx-pragmatic": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-1.0.2.tgz", + "integrity": "sha1-QeK+uGQiNfNLKnqxLKOeByAbjlk=", + "dev": true, + "requires": { + "babel-plugin-syntax-jsx": "^6.0.0" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", + "dev": true + }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", diff --git a/packages/website/package.json b/packages/website/package.json index 85b5dea8..e87b3c3a 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -13,7 +13,10 @@ "build": "parcel build index.html" }, "devDependencies": { + "@babel/core": "~7.7.4", + "@babel/plugin-transform-react-jsx": "~7.7.4", "@figma-export/cli": "^1.0.0", + "babel-plugin-jsx-pragmatic": "~1.0.2", "parcel-bundler": "~1.12.4", "sass": "~1.23.7" }, diff --git a/packages/website/src/CodeBlock.js b/packages/website/src/CodeBlock.js index 6c2beeca..28facb26 100644 --- a/packages/website/src/CodeBlock.js +++ b/packages/website/src/CodeBlock.js @@ -1,12 +1,10 @@ -import { h } from 'preact'; - const CodeBlock = ({ title, description, code, children }) => ( -
+

{title}

{description}

diff --git a/packages/website/src/GitHubLink.js b/packages/website/src/GitHubLink.js index 9566a65f..840a7154 100644 --- a/packages/website/src/GitHubLink.js +++ b/packages/website/src/GitHubLink.js @@ -1,6 +1,5 @@ -/* eslint-disable import/no-unresolved */ -import { h } from 'preact'; +// eslint-disable-next-line import/no-unresolved import { iconMarkGithub } from '../output/es6-dataurl-octicons/Octicons'; const GitHubLink = () => ( diff --git a/packages/website/src/Hero.js b/packages/website/src/Hero.js index b0ff8617..4d302c21 100644 --- a/packages/website/src/Hero.js +++ b/packages/website/src/Hero.js @@ -1,7 +1,7 @@ -/* eslint-disable import/no-unresolved */ -import { h } from 'preact'; - +// eslint-disable-next-line import/no-unresolved import * as Octicons from '../output/es6-dataurl-octicons/Octicons'; + +// eslint-disable-next-line import/no-unresolved import { figmaArrow } from '../output/es6-dataurl/icons'; import figmaImage from '../images/figma-octicons.png'; @@ -10,7 +10,6 @@ const Hero = () => (
diff --git a/packages/website/src/index.js b/packages/website/src/index.js index 3b64592c..f65271b7 100644 --- a/packages/website/src/index.js +++ b/packages/website/src/index.js @@ -1,8 +1,9 @@ -import { h, render, Fragment } from 'preact'; +import { render, Fragment } from 'preact'; + import SvgOcticons from './Hero'; -import SvgAsES6ComponentDataUrl from './SvgAsES6ComponentDataUrl'; -import SvgAsES6ComponentBase64 from './SvgAsES6ComponentBase64'; import GitHubLink from './GitHubLink'; +import ComponentsAsES6 from './output-components/ComponentsAsES6'; +import ComponentsAsSvgstore from './output-components/ComponentsAsSvgstore'; const App = () => ( @@ -18,8 +19,8 @@ const App = () => (
- - + + ); diff --git a/packages/website/src/output-components/ComponentsAsES6.js b/packages/website/src/output-components/ComponentsAsES6.js new file mode 100644 index 00000000..755b67c3 --- /dev/null +++ b/packages/website/src/output-components/ComponentsAsES6.js @@ -0,0 +1,18 @@ +import ComponentsAsES6DataUrl from './ComponentsAsES6_dataUrl'; +import ComponentsAsES6Base64 from './ComponentsAsES6_base64'; + +const ComponentsAsES6 = () => ( +
+

SVG into .js

+

+ Exporting SVG into JS is a good solution. + You will have multiple exported variables that you can easily import in your project. + Another benefit is being able to use tree shaking + to load only icons that you really need. +

+ + +
+); + +export default ComponentsAsES6; diff --git a/packages/website/src/SvgAsES6ComponentBase64.js b/packages/website/src/output-components/ComponentsAsES6_base64.js similarity index 66% rename from packages/website/src/SvgAsES6ComponentBase64.js rename to packages/website/src/output-components/ComponentsAsES6_base64.js index f6e6d29b..1e65c6d8 100644 --- a/packages/website/src/SvgAsES6ComponentBase64.js +++ b/packages/website/src/output-components/ComponentsAsES6_base64.js @@ -1,9 +1,12 @@ -/* eslint-disable import/no-unresolved */ -import { h, Fragment } from 'preact'; +import { Fragment } from 'preact'; -import CodeBlock from './CodeBlock'; -import * as figmaMonochrome from '../output/es6-base64/monochrome'; -import { figmaExport, figmaLogo } from '../output/es6-base64/icons'; +import CodeBlock from '../CodeBlock'; + +// eslint-disable-next-line import/no-unresolved +import * as figmaMonochrome from '../../output/es6-base64/monochrome'; + +// eslint-disable-next-line import/no-unresolved +import { figmaExport, figmaLogo } from '../../output/es6-base64/icons'; const props = { title: ( @@ -11,7 +14,13 @@ const props = { Export your icons as Base 64 ), - description: 'The .js file contains all components with Base 64 encoding. If you want to use it into your images you need to prepend the Data URL "data:image/svg+xml;base64,"', + description: ( + + The .js file contains all components with Base 64 encoding. + If you want to use it into your images you need to prepend the + Data URL data:image/svg+xml;base64, + + ), code: `module.exports = { commands: [ ['components', { diff --git a/packages/website/src/SvgAsES6ComponentDataUrl.js b/packages/website/src/output-components/ComponentsAsES6_dataUrl.js similarity index 82% rename from packages/website/src/SvgAsES6ComponentDataUrl.js rename to packages/website/src/output-components/ComponentsAsES6_dataUrl.js index 35e379a2..c9e25d69 100644 --- a/packages/website/src/SvgAsES6ComponentDataUrl.js +++ b/packages/website/src/output-components/ComponentsAsES6_dataUrl.js @@ -1,9 +1,12 @@ -/* eslint-disable import/no-unresolved */ -import { h, Fragment } from 'preact'; +import { Fragment } from 'preact'; -import CodeBlock from './CodeBlock'; -import * as figmaMonochrome from '../output/es6-dataurl/monochrome'; -import { figmaExport, figmaLogo } from '../output/es6-dataurl/icons'; +import CodeBlock from '../CodeBlock'; + +// eslint-disable-next-line import/no-unresolved +import * as figmaMonochrome from '../../output/es6-dataurl/monochrome'; + +// eslint-disable-next-line import/no-unresolved +import { figmaExport, figmaLogo } from '../../output/es6-dataurl/icons'; const props = { title: ( diff --git a/packages/website/src/output-components/ComponentsAsSvgstore.js b/packages/website/src/output-components/ComponentsAsSvgstore.js new file mode 100644 index 00000000..7b81ef6a --- /dev/null +++ b/packages/website/src/output-components/ComponentsAsSvgstore.js @@ -0,0 +1,16 @@ +import ComponentsAsSvgstoreDefault from './ComponentsAsSvgstore_default'; +import ComponentsAsSvgstoreMonochrome from './ComponentsAsSvgstore_monochrome'; + +const ComponentsAsSvgstore = () => ( +
+

SVG Sprites

+

+ Probably you already know what CSS Sprites are, basically you can combine multiple images into a single image file and use it on a website. + SVG Sprites are very similar, but you will use .svg instead of .png. Discover more on this article "Icon System with SVG Sprites" where you will also find how to use this technique. +

+ + +
+); + +export default ComponentsAsSvgstore; diff --git a/packages/website/src/output-components/ComponentsAsSvgstore_default.js b/packages/website/src/output-components/ComponentsAsSvgstore_default.js new file mode 100644 index 00000000..94842f05 --- /dev/null +++ b/packages/website/src/output-components/ComponentsAsSvgstore_default.js @@ -0,0 +1,54 @@ +/* eslint-disable react/no-danger */ +import { Fragment } from 'preact'; + +import CodeBlock from '../CodeBlock'; + +const fs = require('fs'); + +const figmaMonochrome = fs.readFileSync(`${__dirname}/../../output/svgstore/monochrome.svg`, 'utf-8'); +const figmaIcons = fs.readFileSync(`${__dirname}/../../output/svgstore/icons.svg`, 'utf-8'); + +const props = { + title: ( + + Export your icons as SVG Symbols + + ), + description: ( + + The .svg file contains all components as <symbol> + so you can easly use an icon with + <svg><use href="#icon-name" /></svg> + + ), + code: `module.exports = { + commands: [ + ['components', { + fileId: 'FP7lqd1V00LUaT5zvdklkkZr', + onlyFromPages: ['Octicons'], + outputters: [ + require('@figma-export/output-components-as-svgstore')({ + output: './output/svgstore' + }) + ] + }] + ] + }` +}; + +const SvgAsSvgstoreComponent = () => ( + + +
+
+ + + + + + + + +); + +export default SvgAsSvgstoreComponent; diff --git a/packages/website/src/output-components/ComponentsAsSvgstore_monochrome.js b/packages/website/src/output-components/ComponentsAsSvgstore_monochrome.js new file mode 100644 index 00000000..107d955c --- /dev/null +++ b/packages/website/src/output-components/ComponentsAsSvgstore_monochrome.js @@ -0,0 +1,50 @@ +/* eslint-disable react/no-danger */ +import { Fragment } from 'preact'; + +import CodeBlock from '../CodeBlock'; + +const fs = require('fs'); + +const figmaIcons = fs.readFileSync(`${__dirname}/../../output/svgstore-monochrome/icons.svg`, 'utf-8'); + +const props = { + title: ( + + Export your icons as Monochrome SVG Symbols + + ), + description: ( + + The .svg file contains all components as <symbol> and all fill + properties are removed from the svg so you can easily customize the icon color from css. + + ), + code: `module.exports = { + commands: [ + ['components', { + fileId: 'FP7lqd1V00LUaT5zvdklkkZr', + onlyFromPages: ['Octicons'], + outputters: [ + require('@figma-export/output-components-as-svgstore')({ + output: './output/svgstore-monochrome', + options: { + cleanSymbols: ['fill'] + } + }) + ] + }] + ] + }` +}; + +const SvgAsSvgstoreMonochromeComponent = () => ( + + +
+ + + + +); + +export default SvgAsSvgstoreMonochromeComponent;