Docs: Design guide (#73)

* Add design guide * Update ICON_DESIGN_GUIDE.md * Update ICON_DESIGN_GUIDE.md * Add conventions section * Moved to the docs directory * Update docs/ICON_DESIGN_GUIDE.md Co-authored-by: Locness <37651007+locness3@users.noreply.github.com> * Update docs/ICON_DESIGN_GUIDE.md Co-authored-by: Locness <37651007+locness3@users.noreply.github.com> * Add raw parameter to images url * add alt test * Add alt text Co-authored-by: Locness <37651007+locness3@users.noreply.github.com>
2020-10-25 22:48:03 +01:00
parent 0b88415247
commit 2c38fac9b1
9 changed files with 78 additions and 0 deletions
@@ -0,0 +1,78 @@
+# Icon Design Guide
+
+Here are rules that should be followed to keep quality and consistency when making icons for Lucide.
+
+## Summary of the rules we have
+
+1. Each Icon is desined on a canvas of **24 by 24 pixels**.
+2. Each Icon have **1 pixel padding** between icon and the canvas.
+3. Each icon has a **stroke width of 2 pixels**.
+4. Each icon has **round joins**.
+5. Each icon has **round caps**.
+6. Each icon has **centered strokes**.
+7. Each icon containing squares has a **border radius of 2 pixels**.
+8. Each icon **2 pixels of spacing between elements**.
+
+## The Rules Visualized
+
+### 1. **Each Icon is desined on a canvas of 24 by 24 pixels**
+
+![24px-24px](images/24px-24px.png?raw=true "24px-24px")
+
+### 2. **Each Icon have 1 pixel between icon and the canvas**
+
+![1px-padding](images/1px-padding.png?raw=true "1px-padding")
+
+### 3. **Each icon has a stroke width of 2 pixels**
+
+![2px-stroke](images/2px-stroke.png?raw=true "2px-stroke")
+
+### 4. **Each icon has round joins**
+
+![round-joints](images/round-joints.png?raw=true "round-joints")
+
+### 5. **Each icon has round caps**
+
+![round-caps](images/round-caps.png?raw=true "round-caps")
+
+### 6. **Each icon has centered strokes**
+
+![centered-strokes](images/centered-strokes.png?raw=true "centered-strokes")
+
+### 7. **Each icon containing squares has a border radius of 2 pixels**
+
+![2px-border-radius](images/2px-border-radius.png?raw=true "2px-border-radius")
+
+### 8. **Each icon 2 pixels of spaciong between elements**
+
+![2px-element-spacing](images/2px-element-spacing.png?raw=true "2px-element-spacing")
+
+## Code Conventions
+
+Before an icon is added to the library, we like to have readable and optimized svg code.
+
+### Global Attributes
+
+For each icon these attributes are applied.
+
+```xml
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <!-- SVGElements -->
+</svg>
+```
+
+### Minify paths
+
+Code of paths can get really big.
+To reduce file size we like to minify the code.
+We recommend to use the [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths.