From 5765b11a8d9aeb8666a2edb9d7146e62badbdbf3 Mon Sep 17 00:00:00 2001
From: Marco Montalbano <marcomontalbano.work@gmail.com>
Date: Sat, 11 May 2024 22:28:36 +0200
Subject: [PATCH] docs: update all README.md

---
 packages/cli/README.md                        |  8 ++--
 packages/output-components-as-es6/README.md   | 11 +++--
 packages/output-components-as-svg/README.md   | 11 +++--
 packages/output-components-as-svgr/README.md  | 16 ++++---
 .../output-components-as-svgstore/README.md   | 10 ++--
 packages/output-styles-as-css/README.md       | 11 +++--
 packages/output-styles-as-less/README.md      | 11 +++--
 packages/output-styles-as-sass/README.md      | 11 +++--
 .../README.md                                 | 11 +++--
 packages/transform-svg-with-svgo/README.md    | 47 ++++++++++---------
 10 files changed, 89 insertions(+), 58 deletions(-)

diff --git a/packages/cli/README.md b/packages/cli/README.md
index f43f918a..2d2f607a 100644
--- a/packages/cli/README.md
+++ b/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));
diff --git a/packages/output-components-as-es6/README.md b/packages/output-components-as-es6/README.md
index 5965021d..7607505f 100644
--- a/packages/output-components-as-es6/README.md
+++ b/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,
diff --git a/packages/output-components-as-svg/README.md b/packages/output-components-as-svg/README.md
index 338f23e5..4dc8f599 100644
--- a/packages/output-components-as-svg/README.md
+++ b/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`,
diff --git a/packages/output-components-as-svgr/README.md b/packages/output-components-as-svgr/README.md
index 9581016d..66004941 100644
--- a/packages/output-components-as-svgr/README.md
+++ b/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']
diff --git a/packages/output-components-as-svgstore/README.md b/packages/output-components-as-svgstore/README.md
index f42ac078..8cdb11a8 100644
--- a/packages/output-components-as-svgstore/README.md
+++ b/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: {},
diff --git a/packages/output-styles-as-css/README.md b/packages/output-styles-as-css/README.md
index db68fafd..5897e2ef 100644
--- a/packages/output-styles-as-css/README.md
+++ b/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}` : ''}`,
diff --git a/packages/output-styles-as-less/README.md b/packages/output-styles-as-less/README.md
index 392b6f48..08af59a1 100644
--- a/packages/output-styles-as-less/README.md
+++ b/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}` : ''}`,
diff --git a/packages/output-styles-as-sass/README.md b/packages/output-styles-as-sass/README.md
index 8b0611d2..67e63f94 100644
--- a/packages/output-styles-as-sass/README.md
+++ b/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',
diff --git a/packages/output-styles-as-style-dictionary/README.md b/packages/output-styles-as-style-dictionary/README.md
index d1ad3019..eadd2ad7 100644
--- a/packages/output-styles-as-style-dictionary/README.md
+++ b/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',
diff --git a/packages/transform-svg-with-svgo/README.md b/packages/transform-svg-with-svgo/README.md
index 9a8e1956..e07e1205 100644
--- a/packages/transform-svg-with-svgo/README.md
+++ b/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
-        }
-      ]
-    }]
+          ]
+        })
+      ],
+    }],
   ]
-};
+}
 ```