From 0baf1a49efb4b21b003fa52de67248c71397ece2 Mon Sep 17 00:00:00 2001 From: Karsa Date: Sun, 5 Mar 2023 21:21:26 +0100 Subject: [PATCH] Fixes incorrect relative links in documentation pages (#973) * Fixes incorrect relative links in documentation pages * Unifies documentation page names to avoid 404 links --------- Co-authored-by: Karsa --- .github/PULL_REQUEST_TEMPLATE/new-icon.md | 2 +- CONTRIBUTING.md | 23 +++++++------------ docs/{FIGMA_GUIDE.md => figma-guide.md} | 17 ++++++++++---- ...N_DESIGN_GUIDE.md => icon-design-guide.md} | 0 ...USTRATOR_GUIDE.md => illustrator-guide.md} | 8 +++---- docs/{INKSCAPE_GUIDE.md => inkscape-guide.md} | 0 docs/installation.md | 14 +++++------ 7 files changed, 32 insertions(+), 32 deletions(-) rename docs/{FIGMA_GUIDE.md => figma-guide.md} (84%) rename docs/{ICON_DESIGN_GUIDE.md => icon-design-guide.md} (100%) rename docs/{ILLUSTRATOR_GUIDE.md => illustrator-guide.md} (76%) rename docs/{INKSCAPE_GUIDE.md => inkscape-guide.md} (100%) diff --git a/.github/PULL_REQUEST_TEMPLATE/new-icon.md b/.github/PULL_REQUEST_TEMPLATE/new-icon.md index 702bec78e..0d48e1ab6 100644 --- a/.github/PULL_REQUEST_TEMPLATE/new-icon.md +++ b/.github/PULL_REQUEST_TEMPLATE/new-icon.md @@ -5,7 +5,7 @@ labels: "🎨 - **Name of the icon** : diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ef3c999c3..52bebc907 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -25,28 +25,21 @@ Guidelines for pull requests: Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide. -Read it here: [ICON_GUIDELINES](docs/ICON_DESIGN_GUIDE.md). +Read it here: [ICON_GUIDELINES](/docs/icon-design-guide.md). -### Templates +### Editor guides -Here you can find templates and instructions on how to implement the guidelines with different programs. +Here you can find instructions on how to implement the guidelines with different vector graphics editors: -#### Adobe Illustrator +#### [Adobe Illustrator Guide](/docs/illustrator-guide.md) -`Template`: You can find a template for Adobe Illustrator under `/docs/templates/illustrator-template.ai`. -`Instructions`: You can find the [Illustrator Guide](/docs/ILLUSTRATOR_GUIDE.md) and how to work with the template in `/docs/ILLUSTRATOR_GUIDE.md`. +You can also [download an Adobe Illustrator template](/docs/templates/illustrator-template.ai). -#### Inkscape +#### [Inkscape Guide](/docs/inkscape-guide.md) -`Template`: None -`Instructions`: You can find the [Inkscape Guide](/docs/INKSCAPE_GUIDE.md) and how to set up Inkscape under `/docs/INKSCAPE_GUIDE.md`. +#### [Figma Guide](/docs/figma-guide.md) -#### Figma - -`Template`: None -`Instructions`: You can find the [Figma Guide](/docs/FIGMA_GUIDE.md) and how to set up Figma under `/docs/FIGMA_GUIDE.md`. - -#### Submitting Multiple Icons +### Submitting Multiple Icons If you want submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keep the thread clean and scoped. So don't submit multiple icons in one PR that have noting to do with each other. diff --git a/docs/FIGMA_GUIDE.md b/docs/figma-guide.md similarity index 84% rename from docs/FIGMA_GUIDE.md rename to docs/figma-guide.md index b21ca6761..492db332d 100644 --- a/docs/FIGMA_GUIDE.md +++ b/docs/figma-guide.md @@ -16,7 +16,7 @@ To do this, create a frame of 24x24 pixels. In this newly created frame, you will create your icon. If you want, you can change the name of your frame to the name of the icon you are going to create. Then it will be exported as `FRAME-NAME.svg`. -## Create your icon +## Create Your icon To design your icon in the style of Feather Icons, you need to adjust a few settings in Figma. Draw in your new frame with the pen tool. You can open it with the window at the top, or with the shortcut `P`. Once you click in your frame, you can adjust the settings for the pen tool in the design-window on the right. @@ -26,19 +26,26 @@ Set the following: 1. Corner radius: 2px 2. Stroke 1. Stroke width: 2px - 2. Stroke alignment: center + 2. Stroke alignment: center ![Figma Stroke Options](images/figma-stroke-options.png) -## Export Your Icon +## Export Or Copy Your Icon Once you have completed your icon, you can export it. 1. Select the frame 2. Open the *Export* tab on the right 3. Set the file type as SVG 4. Press export - + +Or you can also copy its source as SVG. + +1. Select the frame +2. Right click it +3. Click on *Copy/Paste as* +4. Click on *Copy as SVG* + That's it. You just made your first icon. Congratulations! ## Figma Tips -1. The [Icon Design Guidelines](ICON_DESIGN_GUIDE.md) dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: `⌥` Option (MacOS) or `Alt` (Windows). \ No newline at end of file +1. The [Icon Design Guidelines](icon-design-guide.md) dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: `⌥` Option (MacOS) or `Alt` (Windows). diff --git a/docs/ICON_DESIGN_GUIDE.md b/docs/icon-design-guide.md similarity index 100% rename from docs/ICON_DESIGN_GUIDE.md rename to docs/icon-design-guide.md diff --git a/docs/ILLUSTRATOR_GUIDE.md b/docs/illustrator-guide.md similarity index 76% rename from docs/ILLUSTRATOR_GUIDE.md rename to docs/illustrator-guide.md index 2e84a9bb4..3f0fc5a84 100644 --- a/docs/ILLUSTRATOR_GUIDE.md +++ b/docs/illustrator-guide.md @@ -10,15 +10,15 @@ This Guide explains how to properly use the Adobe Illustrator Template for Lucid ## General Workflow -The Illustrator template is created following guidelines from the [Icon Design Guide](ICON_DESIGN_GUIDE.md). +The Illustrator template is created following guidelines from the [Icon Design Guide](icon-design-guide.md). **Workflow:** -1. Open the Document which can be found under __*/docs/templates/illustrator_template.ai*__ . +1. Download and open the [Illustrator template](https://github.com/lucide-icons/lucide/blob/main/docs/templates/illustrator_template.ai). 2. You can now remove the content from the example logo layer ("Draw") and start creating. -3. Verify that you follow the [Icon Design Guidelines](ICON_DESIGN_GUIDE.md). +3. Verify that you follow the [Icon Design Guidelines](icon-design-guide.md). 4. Before you export the file as an SVG make sure to check that you followed the guidelines and remove all unecessary layers (especially "Padding" and "Grid"). @@ -26,6 +26,6 @@ The Illustrator template is created following guidelines from the [Icon Design G ![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](https://github.com/lucide-icons/lucide/blob/main/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct. +After that, double check that the [code conventions and SVG global attributes](icon-design-guide.md#code-conventions) are correct. 7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/). diff --git a/docs/INKSCAPE_GUIDE.md b/docs/inkscape-guide.md similarity index 100% rename from docs/INKSCAPE_GUIDE.md rename to docs/inkscape-guide.md diff --git a/docs/installation.md b/docs/installation.md index b6007870c..416e23644 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -18,7 +18,7 @@ or yarn add lucide ``` -For more details, see the [documentation](packages/lucide). +For more details, see the [documentation](packages/lucide.md). ## React @@ -34,7 +34,7 @@ or npm install lucide-react ``` -For more details, see the [documentation](packages/lucide-react). +For more details, see the [documentation](packages/lucide-react.md). ## Vue 2 @@ -50,7 +50,7 @@ or npm install lucide-vue ``` -For more details, see the [documentation](packages/lucide-vue). +For more details, see the [documentation](packages/lucide-vue.md). ## Vue 3 @@ -66,7 +66,7 @@ or npm install lucide-vue-next ``` -For more details, see the [documentation](packages/lucide-vue-next). +For more details, see the [documentation](packages/lucide-vue-next.md). ## Svelte @@ -82,7 +82,7 @@ or npm install lucide-svelte ``` -For more details, see the [documentation](packages/lucide-svelte). +For more details, see the [documentation](packages/lucide-svelte.md). ## Angular @@ -96,7 +96,7 @@ or npm install lucide-angular ``` -For more details, see the [documentation](packages/lucide-angular). +For more details, see the [documentation](packages/lucide-angular.md). ## Preact @@ -112,7 +112,7 @@ or npm install lucide-preact ``` -For more details, see the [documentation](packages/lucide-preact). +For more details, see the [documentation](packages/lucide-preact.md). ## Figma