@equinor/eds-icons
Advanced tools
@equinor/eds-icons - npm Package Compare versions
Comparing version 0.5.0 to 0.5.1
@@ -8,2 +8,8 @@ # Changelog | ||
| ## [0.5.1] - 2020-11-26 | ||
| ### Changed 📓 | ||
| - Updated README.md | ||
| ## [0.5.0] - 2020-11-26 | ||
@@ -10,0 +16,0 @@ |
| { | ||
| "name": "@equinor/eds-icons", | ||
| "version": "0.5.0", | ||
| "version": "0.5.1", | ||
| "description": "Icons from the Equinor Design System", | ||
@@ -5,0 +5,0 @@ "main": "dist/icons.cjs.js", |
| # @equinor/eds-icons | ||
| NB! This is an early version of the EDS Core React components in Typescript and meant for testing only. | ||
| This package is a collection of the `system icons` from the Equinor Design System as javascript objects. | ||
| ### Example of javascript object data | ||
| ```javascript | ||
| { | ||
| name: 'star_filled', | ||
| prefix: 'eds', | ||
| height: '24', | ||
| width: '24', | ||
| svgPathData: 'M12 16.067l4.947 3.6-1.894-5.814L20 10.334h-6.067l-1.933-6-1.933 6H4l4.947 3.52-1.894 5.814 4.947-3.6z', | ||
| } | ||
| ``` | ||
| ## Installation | ||
| ```sh | ||
| npm install @equinor/eds-icons styled-components | ||
| npm install @equinor/eds-icons | ||
| ``` | ||
@@ -27,23 +13,28 @@ | ||
| Import using one of the following options to get the svg data: | ||
| Import svg data: | ||
| ### Import | ||
| ```javascript | ||
| import { save } from "@equinor/eds-icons" | ||
| ``` | ||
| #### ES Module | ||
| ### React | ||
| Most loaders should handle [ECMAScript Modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). | ||
| We have developed a react component to simplify use of the EDS icons library within react. | ||
| ```javascript | ||
| import { star_filled } from "@equinor/eds-icons" | ||
| ``` | ||
| import { Icon } from '@equinor/eds-core-react' | ||
| import { save } from '@equinor/eds-icons' | ||
| #### CommonJS module | ||
| // Use library approach | ||
| Icon.add({ save }) // (this needs only be done once) | ||
| <Icon name="save" /> | ||
| CommonJS will have a separate package path | ||
| // OR | ||
| ```javascript | ||
| const icons = require("@equinor/eds-icons/commonjs") | ||
| // Use directly via data prop: | ||
| <Icon data={save} /> | ||
| ``` | ||
| #### FAQ | ||
| ### FAQ | ||
@@ -54,3 +45,3 @@ * 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. | ||
| ### Rendering icons | ||
| #### Rendering icons | ||
@@ -65,16 +56,12 @@ You can render it using plain [svg](https://developer.mozilla.org/en-US/docs/Web/SVG) or use our provided [React Icon component](#React) in [@equinor/eds-core-react](https://www.npmjs.com/package/@equinor/eds-core-react) | ||
| #### React | ||
| ### Example of javascript object data | ||
| We have developed a react component to simplify use of the EDS icons library within react. | ||
| ```javascript | ||
| import { Icon } from '@equinor/eds-core-react' | ||
| import { save } from '@equinor/eds-icons' | ||
| // Add to library (this needs only be done once) | ||
| Icon.add({ save }) | ||
| // Renders "save" icon | ||
| <Icon name="save" /> | ||
| { | ||
| name: 'star_filled', | ||
| prefix: 'eds', | ||
| height: '24', | ||
| width: '24', | ||
| svgPathData: 'M12 16.067l4.947 3.6-1.894-5.814L20 10.334h-6.067l-1.933-6-1.933 6H4l4.947 3.52-1.894 5.814 4.947-3.6z', | ||
| } | ||
| ``` | ||
@@ -81,0 +68,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.04%
849599
- Number of lines in readme file
- decreased by-15.85%
69