Files
lucide/docs/guide/design/inkscape-guide.md

42 lines
2.0 KiB
Markdown
Raw Permalink Normal View History

---
title: Icon Design Guide
---
# Inkscape Setup Guide
This guide shows the steps to setup Inkscape for creating icons that conform to the Featherity design
guidelines.
## Setting up The Canvas
When opening a new document, Inkscape will create a canvas of a default size. To change the size to 24x24:
1. Open the Document Properties dialog (File -> Document Properties).
2. On the “Page Size” tab, under “Custom Size” set the Units to `px` and set both Height and Width to 24.
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
![Setting Page Size](../../images/page-size.png?raw=true "Setting Page Size")
3. On the “Grid” tab, select `Rectangular Grid` and click “New Grid”.
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
![Setting Grid Properties](../../images/grid-1.png?raw=true "Setting Grid Properties")
4. Set the Grid Units to `px` and set Spacing X and Spacing Y both to 1.
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
![Setting Grid Properties](../../images/grid-2.png?raw=true "Setting Grid Properties")
5. Close the Document Properties dialog.
6. To center the canvas in the viewport, select View -> Zoom -> Drawing.
## Setting up The Paths
1. Create a path or shape.
2. With the path selected, open the Stroke and Fill panel by pressing `Ctrl+Shift+F` on your keyboard.
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
![Stroke Style Properties](../../images/strokes.png?raw=true "Setting Grid Properties")
3. On the “Stroke Style” tab:
* Set Stroke Width to `2px`.
* Select the rounded join type.
* Select the rounded cap type.
4. If the shape is a rectangle, select the rectangle and in the top of the screen below the menu bar, set `Rx` and `Ry` to `2px`.
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
![Rectangle Radius Properties](../../images/corner-radius.png?raw=true "Rectangle Radius Properties")
## Saving A File
1. When ready to save the file, click Save As and select “Optimized SVG” as the file type.
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
![Save As](../../images/save-as.png?raw=true "Save as")
2. After clicking Save, to conform with the other icons in the package, set Pretty Printing to use spaces and set the indentation depth to 2.
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org>
2023-06-04 16:59:38 +02:00
![Optimize](../../images/optimize-settings.png?raw=true "Optimize")