Update icon naming convention

[rossmoody]

Proposing an approach similar to Font Awesome for the way we structure our icons in naming convention and style pattern.

Categories

Brands

Logos and anything related to a branding element of a business or entity that still receives a color override. This section would follow the naming convention rules but would live under this category. I.e. apple-s, apple, apple-l

Full Color

Any icon that is full color in nature and doesn’t inherit color overrides. Can be treated almost like a standalone graphic. Brand logos that are full color would go in here. The main difference being this would be the full color version of it.

Icons

The library of our standard icons. The three styles that would fall under this category would be.

• Solid: Icons that have filled interiors. If the icon can’t be filled, the stroked version becomes a thicker version of the ‘Normal’ state. For instance: https://d.pr/i/gpVtty
• Normal: icons that follow the traditional brand aesthetic of stroked lines with round end caps.
• Light: lighter stroked version of the normal icon. Typical use case for these would be instances where an icon needs to be larger than 32px but would start to look very heavy and off balance if normal is used.

Naming Convention

Icons (including Brand and Full Color categories) would follow a naming convention of:

Title -> Alt Characteristic, Shape, Direction -> Style Modifier

Title: The main identifying characteristic of the icon. The reason someone might look for it.
Alt Characteristic or Shape: An alternate characteristic about the icon that makes it unique from one that came before it and/or if it is tied to a standard shape like circle, square, diamond, etc... There can be more than one, especially if a direction is involved. I.e. arrow-big-circle-right-s.svg
Style Modifier: We are currently going to have Solid, Normal or Light modifiers denoted by their first letter. In the case of Regular icons, no modifier letter is given.

Example

Component

QuestionSIcon | QuestionIcon | QuestionLIcon
QuestionSquareSIcon | QuestionSquareIcon | QuestionSquareLIcon

SVG File

question-s.svg | question.svg | question-l-.svg
question-square-s.svg | question-square.svg | question-square-l.svg