@@ -41,6 +41,33 @@ Feel free to check the [issues](https://github.com/RocketChat/Rocket.Chat.Fusela
41
41
42
42
<!-- /contributing(msg)-->
43
43
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
+
44
71
### Building
45
72
46
73
As this package dependends on others in this monorepo, before anything run the following at the root directory:
0 commit comments