Files
lucide/docs/guide/design/inkscape-guide.md
Eric Fennis 5bfc736b61 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 909b7563c0.

* 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

42 lines
2.0 KiB
Markdown

---
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.
![Setting Page Size](../../images/page-size.png?raw=true "Setting Page Size")
3. On the “Grid” tab, select `Rectangular Grid` and click “New Grid”.
![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.
![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.
![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`.
![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.
![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.
![Optimize](../../images/optimize-settings.png?raw=true "Optimize")