fix images paths

This commit is contained in:
Eric Fennis
2023-04-25 22:52:21 +02:00
parent ec16fd0ed4
commit 350d2c955f
4 changed files with 17 additions and 17 deletions
+1 -1
View File
@@ -28,7 +28,7 @@ Set the following:
1. Stroke width: 2px
2. Stroke alignment: center
![Figma Stroke Options](images/figma-stroke-options.png)
![Figma Stroke Options](../../images/figma-stroke-options.png)
## Export Or Copy Your Icon
Once you have completed your icon, you can export it.
+8 -8
View File
@@ -21,35 +21,35 @@ Here are rules that should be followed to keep quality and consistency when maki
### 1. Icons must be designed on a 24 by 24 pixels canvas.
![24px-24px](images/24px-24px.png?raw=true "24px-24px")
![24px-24px](../../images/24px-24px.png?raw=true "24px-24px")
### 2. Icons must have at least 1 pixel padding within the canvas.
![1px-padding](images/1px-padding.png?raw=true "1px-padding")
![1px-padding](../../images/1px-padding.png?raw=true "1px-padding")
### 3. Icons must have a stroke width of 2 pixels.
![2px-stroke](images/2px-stroke.png?raw=true "2px-stroke")
![2px-stroke](../../images/2px-stroke.png?raw=true "2px-stroke")
### 4. Icons must use round joins.
![round-joints](images/round-joints.png?raw=true "round-joints")
![round-joints](../../images/round-joints.png?raw=true "round-joints")
### 5. Icons must use round caps.
![round-caps](images/round-caps.png?raw=true "round-caps")
![round-caps](../../images/round-caps.png?raw=true "round-caps")
### 6. Icons must use centered strokes.
![centered-strokes](images/centered-strokes.png?raw=true "centered-strokes")
![centered-strokes](../../images/centered-strokes.png?raw=true "centered-strokes")
### 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")
![2px-border-radius](../../images/2px-border-radius.png?raw=true "2px-border-radius")
### 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")
![2px-element-spacing](../../images/2px-element-spacing.png?raw=true "2px-element-spacing")
## Code Conventions
+1 -1
View File
@@ -24,7 +24,7 @@ The Illustrator template is created following guidelines from the [Icon Design G
5. Export the file with the export menu under: `Export > Export As..` than safe the file as SVG. Select the following options in the SVG Options dialog:
![SVG export options in Illustrator](images/illustrator-svg-options.png?raw=true "Setting Page Size")
![SVG export options in Illustrator](../../images/illustrator-svg-options.png?raw=true "Setting Page Size")
After that, double check that the [code conventions and SVG global attributes](icon-design-guide.md#code-conventions) are correct.
+7 -7
View File
@@ -13,11 +13,11 @@ When opening a new document, Inkscape will create a canvas of a default size. T
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")
![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")
![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")
![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.
@@ -25,17 +25,17 @@ When opening a new document, Inkscape will create a canvas of a default size. T
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")
![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")
![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")
![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")
![Optimize](../../images/optimize-settings.png?raw=true "Optimize")