Skip to content

Commit

Permalink
Docs : Improve the design guide (#111)
Browse files Browse the repository at this point in the history
- Use modal verbs instead of "has"
- Use "icons" instead of "each icon"
- change some other things as well
  • Loading branch information
moeenio authored Oct 27, 2020
1 parent 29574a6 commit f3c3fea
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions docs/ICON_DESIGN_GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -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")

Expand All @@ -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
Expand Down

0 comments on commit f3c3fea

Please sign in to comment.