Merge pull request #170 from marcomontalbano/docs-readme

Update all README.md examples

Author: marcomontalbano

packages/cli/README.md

@@ -64,7 +64,7 @@ You can create you own:
 
 ```ts
 // with promise
-module.exports = options => {
+export default options => {
     return (svg) => new Promise((resolve, reject) => {
         resolve(svg);
     });
@@ -73,7 +73,7 @@ module.exports = options => {
 
 ```ts
 // with async/await
-module.exports = options => {
+export default options => {
     return async (svg) => {
         return svg;
     };
@@ -100,7 +100,7 @@ An output function receives a list of pages, in which each page contains compone
 You can create you own:
 
 ```ts
-module.exports = options => {
+export default options => {
     return async pages => {
         console.clear();
         console.log(JSON.stringify(pages));
@@ -144,7 +144,7 @@ An output function receives a list of styles.
 You can create you own:
 
 ```ts
-module.exports = options => {
+export default options => {
     return async styles => {
         console.clear();
         console.log(JSON.stringify(styles));

packages/output-components-as-es6/README.md

@@ -27,13 +27,15 @@ export const figmaLogo = `<svg width="40" height="60" viewBox="0 0 40 60" fill="
 You can easily add this outputter to your `.figmaexportrc.js`:
 
 ```js
-module.exports = {
+import asES6 from '@figma-export/output-components-as-es6'
+
+export default {
     commands: [
         ['components', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             onlyFromPages: ['icons', 'unit-test'],
             outputters: [
-                require('@figma-export/output-components-as-es6')({
+                asES6({
                     output: './output'
                 })
             ]
@@ -47,11 +49,12 @@ module.exports = {
 `getVariableName`, `useBase64` and `useDataUrl` are **optional**.
 
 ```js
-const { camelCase } = require('@figma-export/utils');
+import asES6 from '@figma-export/output-components-as-es6'
+import { camelCase } from '@figma-export/utils'
 
 ...
 
-require('@figma-export/output-components-as-es6')({
+asES6({
     output: './output',
     getVariableName: (options) => camelCase(options.componentName.trim()),
     useBase64: false,

packages/output-components-as-svg/README.md

@@ -29,13 +29,15 @@ $ tree output/
 You can easily add this outputter to your `.figmaexportrc.js`:
 
 ```js
-module.exports = {
+import asSvg from '@figma-export/output-components-as-svg'
+
+export default {
     commands: [
         ['components', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             onlyFromPages: ['icons', 'unit-test'],
             outputters: [
-                require('@figma-export/output-components-as-svg')({
+                asSvg({
                     output: './output'
                 })
             ]
@@ -49,11 +51,12 @@ module.exports = {
 `getDirname` and `getBasename` are **optional**.
 
 ```js
-const path = require('path');
+import asSvg from '@figma-export/output-components-as-svg'
+import path from 'path'
 
 ...
 
-require('@figma-export/output-components-as-svg')({
+asSvg({
     output: './output',
     getDirname: (options) => `${options.pageName}${path.sep}${options.dirname}`,
     getBasename: (options) => `${options.basename}.svg`,

packages/output-components-as-svgr/README.md

@@ -34,13 +34,15 @@ $ tree output/
 You can easily add this outputter to your `.figmaexportrc.js`:
 
 ```js
-module.exports = {
+import asSvgr from '@figma-export/output-components-as-svgr'
+
+export default {
     commands: [
         ['components', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             onlyFromPages: ['icons', 'unit-test'],
             outputters: [
-                require('@figma-export/output-components-as-svgr')({
+                asSvgr({
                     output: './output'
                 })
             ]
@@ -54,12 +56,13 @@ module.exports = {
 `getDirname`, `getComponentName`, `getComponentFilename`, `getFileExtension`, `getExportTemplate` and `getSvgrConfig` are **optional**.
 
 ```js
-const path = require('path');
-const { pascalCase } = require('@figma-export/utils');
+import asSvgr from '@figma-export/output-components-as-svgr'
+import { pascalCase } from '@figma-export/utils'
+import path from 'path'
 
 ...
 
-require('@figma-export/output-components-as-svgr')({
+asSvgr({
     output: './output',
     getDirname: (options) => `${options.pageName}${path.sep}${options.dirname}`,
     getComponentName: (options) => `${pascalCase(options.basename)}`,
@@ -90,11 +93,12 @@ npm install --save-dev @svgr/plugin-jsx
 
 ```js
 // .figmaexportrc.js
+import asSvgr from '@figma-export/output-components-as-svgr'
 
 ...
 
 outputters: [
-  require('@figma-export/output-components-as-svgr')({
+  asSvgr({
     output: './output/svgr',
     getSvgrConfig: () => ({
       plugins: ['@svgr/plugin-jsx']

packages/output-components-as-svgstore/README.md

@@ -24,13 +24,15 @@ You can read more on <a target="_blank" rel="noopener noreferrer" href="https://
 You can easily add this outputter to your `.figmaexportrc.js`:
 
 ```js
-module.exports = {
+import asSvgstore from '@figma-export/output-components-as-svgstore'
+
+export default {
     commands: [
         ['components', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             onlyFromPages: ['icons', 'unit-test'],
             outputters: [
-                require('@figma-export/output-components-as-svgstore')({
+                asSvgstore({
                     output: './output'
                 })
             ]
@@ -44,7 +46,9 @@ module.exports = {
 `getIconId` and `svgstoreConfig` are **optional**.
 
 ```js
-require('@figma-export/output-components-as-svgstore')({
+import asSvgstore from '@figma-export/output-components-as-svgstore'
+
+asSvgstore({
     output: './output',
     getIconId: (options) => `${options.pageName}/${options.componentName}`,
     svgstoreConfig: {},

packages/output-styles-as-css/README.md

@@ -18,12 +18,14 @@ $ tree output/
 You can easily add this outputter to your `.figmaexportrc.js`:
 
 ```js
-module.exports = {
+import asCss from '@figma-export/output-styles-as-css'
+
+export default {
     commands: [
         ['styles', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             outputters: [
-                require('@figma-export/output-styles-as-css')({
+                asCss({
                     output: './output'
                 })
             ]
@@ -37,11 +39,12 @@ module.exports = {
 `getFilename` and `getVariableName` are **optional**.
 
 ```js
-const { kebabCase } = require('@figma-export/utils');
+import asCss from '@figma-export/output-styles-as-css'
+import { kebabCase } from '@figma-export/utils'
 
 ...
 
-require('@figma-export/output-styles-as-css')({
+asCss({
     output: './output',
     getFilename: () => '_variables',
     getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,

packages/output-styles-as-less/README.md

@@ -18,12 +18,14 @@ $ tree output/
 You can easily add this outputter to your `.figmaexportrc.js`:
 
 ```js
-module.exports = {
+import asLess from '@figma-export/output-styles-as-less'
+
+export default {
     commands: [
         ['styles', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             outputters: [
-                require('@figma-export/output-styles-as-less')({
+                asLess({
                     output: './output'
                 })
             ]
@@ -37,11 +39,12 @@ module.exports = {
 `getFilename` and `getVariableName` are **optional**.
 
 ```js
-const { kebabCase } = require('@figma-export/utils');
+import asLess from '@figma-export/output-styles-as-less'
+import { kebabCase } from '@figma-export/utils'
 
 ...
 
-require('@figma-export/output-styles-as-less')({
+asLess({
     output: './output',
     getFilename: () => '_variables',
     getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,

packages/output-styles-as-sass/README.md

@@ -18,12 +18,14 @@ $ tree output/
 You can easily add this outputter to your `.figmaexportrc.js`:
 
 ```js
-module.exports = {
+import asSass from '@figma-export/output-styles-as-sass'
+
+export default {
     commands: [
         ['styles', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             outputters: [
-                require('@figma-export/output-styles-as-sass')({
+                asSass({
                     output: './output'
                 })
             ]
@@ -37,11 +39,12 @@ module.exports = {
 `getExtension`, `getFilename` and `getVariableName` are **optional**.
 
 ```js
-const { kebabCase } = require('@figma-export/utils');
+import asSass from '@figma-export/output-styles-as-sass'
+import { kebabCase } from '@figma-export/utils'
 
 ...
 
-require('@figma-export/output-styles-as-sass')({
+asSass({
     output: './output',
     getExtension: () => 'SCSS',
     getFilename: () => '_variables',

packages/output-styles-as-style-dictionary/README.md

@@ -18,12 +18,14 @@ $ tree output/
 You can easily add this outputter to your `.figmaexportrc.js`:
 
 ```js
-module.exports = {
+import asStyleDictionary from '@figma-export/output-styles-as-style-dictionary'
+
+export default {
     commands: [
         ['styles', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             outputters: [
-                require('@figma-export/output-styles-as-style-dictionary')({
+                asStyleDictionary({
                     output: './output'
                 })
             ]
@@ -37,11 +39,12 @@ module.exports = {
 `getExtension`, `getFilename` and `getVariableName` are **optional**.
 
 ```js
-const { kebabCase } = require('@figma-export/utils');
+import asStyleDictionary from '@figma-export/output-styles-as-style-dictionary'
+import { kebabCase } from '@figma-export/utils'
 
 ...
 
-require('@figma-export/output-styles-as-style-dictionary')({
+asStyleDictionary({
     output: './output',
     getExtension: () => 'JSON',
     getFilename: () => 'base',

packages/transform-svg-with-svgo/README.md

@@ -18,29 +18,34 @@ yarn add @figma-export/transform-svg-with-svgo --dev
 
 ## Usage
 
-You can use a custom configuration for svgo, creating a `.figmaexportrc.js` file and provide a `config` object for this package.
+You can transform an svg before exporting with svgo:
 
 ```js
-// .figmaexportrc.js
-
-module.exports = {
-  configs: [
-    ['@figma-export/transform-svg-with-svgo', {
-      plugins: [
-        {
-          name: 'preset-default',
-          params: {
-            overrides: {
-              removeViewBox: false,
+import transformSvgWithSvgo from '@figma-export/transform-svg-with-svgo'
+
+export default {
+  commands: [
+    ['components', {
+      fileId: 'fzYhvQpqwhZDUImRz431Qo',
+      onlyFromPages: ['icons', 'unit-test'],
+      transformers: [
+        transformSvgWithSvgo({
+          plugins: [
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                }
+              }
+            },
+            {
+              name: 'removeDimensions'
             }
-          }
-        },
-        {
-          name: 'removeDimensions',
-          active: true
-        }
-      ]
-    }]
+          ]
+        })
+      ],
+    }],
   ]
-};
+}
 ```