Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 16:07:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated naming guidelines with element order and modifier naming scheme (#1874)

Browse Source 
* Update icon-design-guide.md

* Update docs/guide/design/icon-design-guide.md

---------

Co-authored-by: Karsa <karsa@sztaki.hu>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
This commit is contained in:
Karsa
2024-02-12 19:04:03 +01:00
committed by GitHub
parent 9bf8a653a3
commit 42b494f853
1 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/guide/design/icon-design-guide.md
View File

@@ -106,6 +106,15 @@ Here are rules that should be followed to keep quality and consistency when maki
6. Names containing numerals are not allowed, unless the number itself is represented in the icon.\
For example: `arrow-down-0-to-1` contains both numerals.
7. Icons depicting multiple elements (e.g. a person and a circle) of different sizes must list these elements in decreasing order of size.\
For example: if the circle is bigger, it should be `circle-person`, if the person is bigger, it should be `person-circle`.
8. Icons depicting multiple elements of roughly equal sizes (e.g. a `ruler` and a `pencil`) must list these elements in English reading order.\
For example: if the `pencil` is either above or left of `ruler`, it should be `pencil-ruler`, otherwise, it should be `ruler-pencil`.
9. Icons depicting some sort of variation of an element must use the `[element]-[modifier]` naming scheme, with modifiers being applied to each element respectively.\
For example: a dashed circle must be named `circle-dashed`, not `dashed-circle`, and in coordination with the previous guidelines, a dashed circle containing a broken heart would be named `circle-dashed-heart-broken`, due to the heart being smaller than the circle.
## Code Conventions
Before an icon is added to the library, we like to have readable and optimized SVG code.