From 42b494f8534f8349743a0ac02810bd53d82c2b4a Mon Sep 17 00:00:00 2001 From: Karsa Date: Mon, 12 Feb 2024 19:04:03 +0100 Subject: [PATCH] Updated naming guidelines with element order and modifier naming scheme (#1874) * Update icon-design-guide.md * Update docs/guide/design/icon-design-guide.md --------- Co-authored-by: Karsa Co-authored-by: Eric Fennis --- docs/guide/design/icon-design-guide.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/guide/design/icon-design-guide.md b/docs/guide/design/icon-design-guide.md index 007863e07..82e37b08d 100644 --- a/docs/guide/design/icon-design-guide.md +++ b/docs/guide/design/icon-design-guide.md @@ -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.