Skip to content

Commit 1fa7748

Browse files
feat(icons): New icons (#511)
* New icons * Add more icons * Fix icon names Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
1 parent 2e9e497 commit 1fa7748

13 files changed

+75
-3
lines changed
Loading
Loading

packages/icons/README.md

+27
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,33 @@ Feel free to check the [issues](https://github.com/RocketChat/Rocket.Chat.Fusela
4141

4242
<!--/contributing(msg)-->
4343

44+
### Adding new icons
45+
46+
All the icons should be designed by Rocket.Chat's design crew, following some conventions:
47+
48+
- The view box must have the dimensions of 32x32 units;
49+
- Any horizontal assimetry must follow the left-to-right direction.
50+
- The icon must be published on Figma.
51+
52+
As the icons might be arbitrarily scaled, the chosen source format for individual icon graphics is
53+
SVG. As Figma can export graphics with some additional SVG attributes and elements, they must be
54+
removed:
55+
56+
- The `<svg>` element must contain only two attributes: `viewBox` (probably with the value of`"0 0 32 32"`) and
57+
`xmlns`;
58+
- XLink references (e.g. masks and clip paths) must be discarded;
59+
- The `<path>` elements must keep only the `d` attribute, with no additional styling attribute;
60+
- `<g>` and other elements must be stripped by some optimization tooling, keeping only `<path>` elements.
61+
62+
The `src/` directory holds all the SVG icons that would be processed. The filenames define the icon names, so they
63+
should stick with a basic rule: **an icon name must describe the icon shape, not its utility**. For instance:
64+
65+
- [-] `message.svg` (wrong)
66+
- [x] `balloon.svg` (right)
67+
68+
If the icon must be mirrored for right-to-left read direction, it required to add a trailing `.dir` before the file
69+
extension (e.g. `backspace.dir.svg`).
70+
4471
### Building
4572

4673
As this package dependends on others in this monorepo, before anything run the following at the root directory:

packages/icons/glyphsMapping.json

+21
Original file line numberDiff line numberDiff line change
@@ -781,5 +781,26 @@
781781
},
782782
"headphone-off": {
783783
"start": "\ue0d8"
784+
},
785+
"brush": {
786+
"start": "\ue0d9"
787+
},
788+
"crop": {
789+
"start": "\ue0da"
790+
},
791+
"cross-small": {
792+
"start": "\ue0db"
793+
},
794+
"globe-off": {
795+
"start": "\ue0dc"
796+
},
797+
"plus-small": {
798+
"start": "\ue0dd"
799+
},
800+
"text-increase": {
801+
"start": "\ue0de"
802+
},
803+
"text-decrease": {
804+
"start": "\ue0df"
784805
}
785806
}

packages/icons/src/brush.svg

+3
Loading

packages/icons/src/crop.svg

+4
Loading

packages/icons/src/cross-small.svg

+3
Loading

packages/icons/src/globe-off.svg

+3
Loading

packages/icons/src/new-window.dir.svg

-3
This file was deleted.

packages/icons/src/new-window.svg

+3
Loading

packages/icons/src/plus-small.svg

+3
Loading

packages/icons/src/text-decrease.svg

+4
Loading

packages/icons/src/text-increase.svg

+4
Loading

0 commit comments

Comments
 (0)