@equinor/eds-icons 0.10.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -8
- package/dist/icons.cjs.js +656 -199
- package/dist/icons.esm.js +630 -193
- package/dist/types/src/data.d.ts +60 -40
- package/dist/types/src/types.d.ts +3 -0
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -39,23 +39,29 @@ Icon.add({ save }) // (this needs only be done once)
|
|
|
39
39
|
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
###
|
|
42
|
+
### Other web frameworks
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
You can render the EDS icons using plain [svg](https://developer.mozilla.org/en-US/docs/Web/SVG).
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
⚠️ Due to how Figma parses and exports svg icons the following attributes must be added to your `<path>` element; `fill-rule="evenodd" clip-rule="evenodd"`.
|
|
47
47
|
|
|
48
|
-
|
|
48
|
+
These are not included to reduce bundle size as they are needed for every icon.
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
```javascript
|
|
51
|
+
import { save } from '@equinor/eds-icons'
|
|
52
|
+
|
|
53
|
+
<svg viewBox={`0 0 ${save.width} ${save.height}`}>
|
|
54
|
+
<path d={save.svgPathData} fill-rule="evenodd" clip-rule="evenodd">
|
|
55
|
+
</svg>
|
|
56
|
+
```
|
|
51
57
|
|
|
52
|
-
|
|
58
|
+
#### Icon names
|
|
53
59
|
|
|
54
|
-
Use [EDS Assets in Figma](https://www.figma.com/file/BQjYMxdSdgRkdhKTDDU7L4KU/Assets?node-id=2%3A3)(Equinor Figma account needed🔒) or [
|
|
60
|
+
Use [EDS Assets in Figma](https://www.figma.com/file/BQjYMxdSdgRkdhKTDDU7L4KU/Assets?node-id=2%3A3)(Equinor Figma account needed🔒) or our [icon preview in Storybook](https://eds-storybook-react.azurewebsites.net/?path=/story/icons--preview) for icon names. Spaces in icon names are replaced with underscores.
|
|
55
61
|
|
|
56
62
|
`star-filled -> star_filled`.
|
|
57
63
|
|
|
58
|
-
### Example of
|
|
64
|
+
### Example of icon data
|
|
59
65
|
|
|
60
66
|
```javascript
|
|
61
67
|
{
|
|
@@ -67,6 +73,12 @@ Use [EDS Assets in Figma](https://www.figma.com/file/BQjYMxdSdgRkdhKTDDU7L4KU/As
|
|
|
67
73
|
}
|
|
68
74
|
```
|
|
69
75
|
|
|
76
|
+
### FAQ
|
|
77
|
+
|
|
78
|
+
* If you are using NodeJS 13+ for module loading, it now has native ES modules support. Add `"type":"module"` to your apps `package.json` to enable this.
|
|
79
|
+
|
|
80
|
+
* If you get a syntax error trying to import ES module, try importing the CJS module as not all loaders have support for ES modules yet
|
|
81
|
+
|
|
70
82
|
## Credits
|
|
71
83
|
|
|
72
84
|
The EDS system icons are built on a copy of the [Outlined Material Design](https://material.io/resources/icons/?style=outline) icons provided open-source by Google. The icons have been customised and renamed for Equinor’s use.
|