React icon props (#163)

* feat: Upgrade to @nrk/svg-to-js@2.2.0 for React icon props -support

* docs: Fix scaling example parsing bug

* docs: Show how to set icon component color by styling fill

lib/readme.md

@@ -44,23 +44,44 @@ demo-->
 npm install @nrk/core-icons
 ```
 
+### Using static
+
+Recommended only for prototyping.
+
+```html
+<script async src="https://static.nrk.no/core-icons/latest/core-icons.min.js"></script>
+```
+
+## Usage
+
 All icons are exposed individually as exported constants (enabling [tree shaking](https://medium.com/@netxm/what-is-tree-shaking-de7c6be5cadd)):
 
-```js
-import { nrkLogoNrk } from '@nrk/core-icons'      // Vanilla JS, String
+```jsx
+import { nrkLogoNrk } from '@nrk/core-icons'      // Plain JS, SVG-element as String
 import { NrkLogoNrk } from '@nrk/core-icons/jsx'  // React, ReactElement
 
-<NrkLogoNrk />                                    // Example render a NRK logo with React
+<NrkLogoNrk />                                    // Example render the NRK logo with React
 <span style={{ color: 'red', fontSize: 16 }}>     // Style is inherited from parent element
   <NrkLogoNrk />
 </span>
 ```
-### Using static
 
-Recommended only for prototyping.
+### Overriding props for React elements
 
-```html
-<script async src="https://static.nrk.no/core-icons/major/9/core-icons.min.js"></script>
+The React/jsx exports can take props (of type `React.SVGProps`, exhaustive list can be found in [definitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L2486)) to set or override existing values, just like a regular React functional component.
+
+Please note that overriding default values should be kept to a minimum, to maintain consistency for users.
+
+```jsx
+// Make sure to import React component
+import { NrkLogoNrk } from '@nrk/core-icons/jsx'
+// JSX markup
+(...)
+<NrkLogoNrk style={{ 'fill': 'red' }} />
+(...)
+
+// Renders HTML:
+<svg aria-hidden="true" width="1.429em" height="1.429em" viewBox="0 0 20 20" style="fill: red;">(...)</svg>
 ```
 
 ## Scaling
@@ -71,7 +92,7 @@ Scale the icons/logos by using font sizes divisible with `16` for sharpest rende
 ✅ Do | 🚫 Don't
 :-- | :--
 `.parent { font-size: 16px }` | `.parent svg { width: 30px; height: 30px }`
-<div>`<div class="parent"><svg style="width:1.5em;height:1.5em">…`</div> | `<div class="parent"><svg style="width:30px;height:30px">…`
+`<div class="parent"><svg style="width:1.5em;height:1.5em">…` | `<div class="parent"><svg style="width:30px;height:30px">…`
 
 Note: correct width/height in `em` for each icon is automatically provided by `@nrk/core-icons`
 

package.json

@@ -19,7 +19,7 @@
     "static-publish": "npm run build && static-publish --directory=lib --account=nrk-core --latest --major"
   },
   "devDependencies": {
-    "@nrk/svg-to-js": "2.1.4",
+    "@nrk/svg-to-js": "2.2.0",
     "archiver": "5.3.0",
     "esm": "3.2.25",
     "http-server": "13.0.2",