Docs : Improve the design guide (#111)

- Use modal verbs instead of "has"
- Use "icons" instead of "each icon"
- change some other things as well
This commit is contained in:
Locness
2020-10-27 21:48:45 +01:00
committed by GitHub
parent 29574a6385
commit f3c3fea228

View File

@@ -4,46 +4,46 @@ Here are rules that should be followed to keep quality and consistency when maki
## 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**.
1. Icons must be designed on a **24 by 24 pixels** canvas.
2. Icons must have a **1 pixel padding** within the canvas.
3. Icons must have a **stroke width of 2 pixels**.
4. Icons must use **round joins**.
5. Icons must use **round caps**.
6. Icons must use **centered strokes**.
7. Shapes (such as rectangles) in icons must have **border radius of 2 pixels**.
8. Distinct elements must have **2 pixels of spacing between each other**.
## The Rules Visualized
### 1. **Each Icon is desined on a canvas of 24 by 24 pixels**
### 1. Icons must be designed on a 24 by 24 pixels canvas.
![24px-24px](images/24px-24px.png?raw=true "24px-24px")
### 2. **Each Icon have 1 pixel between icon and the canvas**
### 2. Icons must have a 1 pixel padding within the canvas.
![1px-padding](images/1px-padding.png?raw=true "1px-padding")
### 3. **Each icon has a stroke width of 2 pixels**
### 3. Icons must have a stroke width of 2 pixels.
![2px-stroke](images/2px-stroke.png?raw=true "2px-stroke")
### 4. **Each icon has round joins**
### 4. Icons must use round joins.
![round-joints](images/round-joints.png?raw=true "round-joints")
### 5. **Each icon has round caps**
### 5. Icons must use round caps.
![round-caps](images/round-caps.png?raw=true "round-caps")
### 6. **Each icon has centered strokes**
### 6. Icons must use centered strokes.
![centered-strokes](images/centered-strokes.png?raw=true "centered-strokes")
### 7. **Each icon containing squares has a border radius of 2 pixels**
### 7. Shapes (such as squares) in icons must have 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**
### 8. Distinct elements must have 2 pixels of spacing between each other.
![2px-element-spacing](images/2px-element-spacing.png?raw=true "2px-element-spacing")
@@ -53,7 +53,7 @@ Before an icon is added to the library, we like to have readable and optimized s
### Global Attributes
For each icon these attributes are applied.
For each icon these attributes are applied, corresponding to the above rules.
```xml
<svg