From 969188aefc2ddca1e039aa41ca681b5c328fbe66 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 18 Oct 2024 09:48:30 +0200 Subject: [PATCH 1/8] svgo config --- proprietary/assets/svgo.config.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 proprietary/assets/svgo.config.js diff --git a/proprietary/assets/svgo.config.js b/proprietary/assets/svgo.config.js new file mode 100644 index 0000000000..5ecb855c70 --- /dev/null +++ b/proprietary/assets/svgo.config.js @@ -0,0 +1,13 @@ +/* eslint-disable no-undef */ +module.exports = { + plugins: [ + 'removeDimensions', + 'removeUselessStrokeAndFill', + { + name: 'removeAttrs', + params: { + attrs: '(fill|stroke)', + }, + }, + ], +} From eac2a8c6dc8fa50144fb848451d3b10efe985609 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 18 Oct 2024 09:49:09 +0200 Subject: [PATCH 2/8] Script to exclude Radio icon --- proprietary/assets/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/assets/package.json b/proprietary/assets/package.json index a89be55d33..66111bd724 100644 --- a/proprietary/assets/package.json +++ b/proprietary/assets/package.json @@ -17,7 +17,7 @@ "directory": "proprietary/assets" }, "scripts": { - "optimize-icons": "svgo -f icons" + "optimize-icons": "svgo -f icons --exclude=Radio.svg" }, "devDependencies": { "svgo": "3.3.2" From 3486c72c5c5cddcc357146d4312f7198a7eb6548 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 18 Oct 2024 09:53:30 +0200 Subject: [PATCH 3/8] Updated README --- proprietary/assets/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/proprietary/assets/README.md b/proprietary/assets/README.md index 561c71101f..3d3cd68fd9 100644 --- a/proprietary/assets/README.md +++ b/proprietary/assets/README.md @@ -8,3 +8,11 @@ Assets for the City of Amsterdam See the Design System documentation for guides on [the web manifest and application icons](https://designsystem.amsterdam/?path=/docs/docs-developer-guide-web-app--docs) and [the favicon](https://designsystem.amsterdam/?path=/docs/brand-assets-favicon--docs). + +## Exporting icons + +To export all icons from Figma to SVG use the native export functionality in Figma. To select all icons select the frame, press `Enter` to select direct children and then `Enter` again to select all icon components. The select export to SVG in the sidebar and export all icons to the `icons` folder. Then run the following command to optimize the SVG files: + +```bash +npm run optimize-icons +``` From 687a33e0d3366a2c3e5f3860841b8cd19e65ae8f Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 25 Oct 2024 11:20:46 +0200 Subject: [PATCH 4/8] Contributing doc, with added figma URL --- proprietary/assets/README.md | 8 -------- proprietary/react-icons/CONTRIBUTING.md | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 8 deletions(-) create mode 100644 proprietary/react-icons/CONTRIBUTING.md diff --git a/proprietary/assets/README.md b/proprietary/assets/README.md index 3d3cd68fd9..561c71101f 100644 --- a/proprietary/assets/README.md +++ b/proprietary/assets/README.md @@ -8,11 +8,3 @@ Assets for the City of Amsterdam See the Design System documentation for guides on [the web manifest and application icons](https://designsystem.amsterdam/?path=/docs/docs-developer-guide-web-app--docs) and [the favicon](https://designsystem.amsterdam/?path=/docs/brand-assets-favicon--docs). - -## Exporting icons - -To export all icons from Figma to SVG use the native export functionality in Figma. To select all icons select the frame, press `Enter` to select direct children and then `Enter` again to select all icon components. The select export to SVG in the sidebar and export all icons to the `icons` folder. Then run the following command to optimize the SVG files: - -```bash -npm run optimize-icons -``` diff --git a/proprietary/react-icons/CONTRIBUTING.md b/proprietary/react-icons/CONTRIBUTING.md new file mode 100644 index 0000000000..d4ef404762 --- /dev/null +++ b/proprietary/react-icons/CONTRIBUTING.md @@ -0,0 +1,15 @@ + + +# Contributing Guidelines + +## Contents + +- [Exporting icons](#exporting-icons) + +## Exporting icons + +To export all icons from [the Figma file](https://www.figma.com/design/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?node-id=6852-5124) to SVG use the native SVG export functionality in Figma. To select all icons select the shapes frame, press `Enter` to select direct children and then `Enter` again to select all icon components. The select export to SVG in the sidebar and export all icons to the `icons` folder. Then run the following command to optimize the SVG files: + +```bash +npm run optimize-icons +``` From ef24179e11e29d5e596e9b6f40d5ffa1ec280c7a Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Mon, 28 Oct 2024 10:03:32 +0100 Subject: [PATCH 5/8] Update proprietary/react-icons/CONTRIBUTING.md Co-authored-by: Vincent Smedinga --- proprietary/react-icons/CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/react-icons/CONTRIBUTING.md b/proprietary/react-icons/CONTRIBUTING.md index d4ef404762..c9ceb0978f 100644 --- a/proprietary/react-icons/CONTRIBUTING.md +++ b/proprietary/react-icons/CONTRIBUTING.md @@ -10,6 +10,6 @@ To export all icons from [the Figma file](https://www.figma.com/design/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?node-id=6852-5124) to SVG use the native SVG export functionality in Figma. To select all icons select the shapes frame, press `Enter` to select direct children and then `Enter` again to select all icon components. The select export to SVG in the sidebar and export all icons to the `icons` folder. Then run the following command to optimize the SVG files: -```bash +```sh npm run optimize-icons ``` From a11252a95a25a0c98d70fab2127c1b318990c471 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 8 Nov 2024 11:01:02 +0100 Subject: [PATCH 6/8] Documentation change --- proprietary/react-icons/CONTRIBUTING.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/proprietary/react-icons/CONTRIBUTING.md b/proprietary/react-icons/CONTRIBUTING.md index c9ceb0978f..8d169481c9 100644 --- a/proprietary/react-icons/CONTRIBUTING.md +++ b/proprietary/react-icons/CONTRIBUTING.md @@ -2,13 +2,14 @@ # Contributing Guidelines -## Contents +## Importing icons from Figma -- [Exporting icons](#exporting-icons) - -## Exporting icons - -To export all icons from [the Figma file](https://www.figma.com/design/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?node-id=6852-5124) to SVG use the native SVG export functionality in Figma. To select all icons select the shapes frame, press `Enter` to select direct children and then `Enter` again to select all icon components. The select export to SVG in the sidebar and export all icons to the `icons` folder. Then run the following command to optimize the SVG files: +We create and update icons in Figma, then import them into this package for distribution. +**Important**: Only export icons from Figma for use in this package. Do not use these icons directly in an application. +To export all icons from [the Figma file](https://www.figma.com/design/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?node-id=6852-5124), use Figma's built-in SVG export feature. +Select the frame containing all the icon shapes, press `Enter` to select direct children and then press `Enter` again to select all icon components. +In the right-hand sidebar, click the plus sign next to Export. Choose SVG and export. +Copy these files over to the `icons` folder and run the following command to optimize them: ```sh npm run optimize-icons From fec624eeb97e163f51b975667db293d7c80f5e2f Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 8 Nov 2024 11:01:56 +0100 Subject: [PATCH 7/8] Move file --- proprietary/{react-icons => assets}/CONTRIBUTING.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename proprietary/{react-icons => assets}/CONTRIBUTING.md (100%) diff --git a/proprietary/react-icons/CONTRIBUTING.md b/proprietary/assets/CONTRIBUTING.md similarity index 100% rename from proprietary/react-icons/CONTRIBUTING.md rename to proprietary/assets/CONTRIBUTING.md From d8d395afd756d756fb2061688283f0ea6802839e Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 8 Nov 2024 12:21:39 +0100 Subject: [PATCH 8/8] Update proprietary/assets/CONTRIBUTING.md Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- proprietary/assets/CONTRIBUTING.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/proprietary/assets/CONTRIBUTING.md b/proprietary/assets/CONTRIBUTING.md index 8d169481c9..105983c03e 100644 --- a/proprietary/assets/CONTRIBUTING.md +++ b/proprietary/assets/CONTRIBUTING.md @@ -5,7 +5,9 @@ ## Importing icons from Figma We create and update icons in Figma, then import them into this package for distribution. + **Important**: Only export icons from Figma for use in this package. Do not use these icons directly in an application. + To export all icons from [the Figma file](https://www.figma.com/design/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?node-id=6852-5124), use Figma's built-in SVG export feature. Select the frame containing all the icon shapes, press `Enter` to select direct children and then press `Enter` again to select all icon components. In the right-hand sidebar, click the plus sign next to Export. Choose SVG and export.