Merge branch 'feature/fix-icons' into 'master'

Feature/fix icons

See merge request codmill/customer-projects/guardian/pluto-headers!16

.gitlab-ci.yml

@@ -14,6 +14,8 @@ frontend:
   artifacts:
     paths:
       - build/index.js
+      - build/index.es.js
+      - build/index.d.ts
     reports:
       junit: junit.xml
   tags:

README.md

@@ -90,6 +90,49 @@ Usage:
 The optional `plutoCoreBaseUri` parameter allows you to override the relative base url of 
 pluto-core from the default value `/pluto-core`. It's not expected to be of any use in the "real world".
 
+## Icons
+<img src="src/static/w.svg" width="64" height="64" alt="Working Group">
+<img src="src/static/c.svg" width="64" height="64" alt="Commission">
+<img src="src/static/p.svg" width="64" height="64" alt="Project">
+<img src="src/static/m.svg" width="64" height="64" alt="Master">
+
+The icons used in the Breadcrumb are available as separate SVG icons, which can be imported into your components.
+
+In order to make this work, you'll need to set up your module bundler to import and transpile SVG images correctly.
+Our webpack configuration looks like this:
+
+```javascript
+var config = {
+  module: {
+        rules: [
+          {
+            test: /\.svg$/i,
+            use: [
+              {
+                loader: 'url-loader',
+                options: {
+                  generator: (content) => svgToMiniDataUri(content.toString()),
+                },
+              },
+            ],
+          }
+        ]
+    }
+}
+```
+
+With url-loader set up as above, you can use the icon in a component like so:
+
+```typescript jsx
+import IconWorkingGroup from "pluto-headers/src/static/w.svg";
+
+return <div>
+  <img src={IconWorkingGroup} alt="W" style={{width: "32px", height: "32px"}}/>
+</div>
+```
+
+You should always specify a fixed width and height because the raw images render very large
+
 ## SystemNotification
 ![System notification image](doc/SystemNotification.png)
 

__tests__/imagemock.js

@@ -1,2 +1,6 @@
+import React from "react";
+
 //null file that is used to mock out image png/svg imports
-module.exports = {};
+export default ()=>{
+    return <img alt="test"/>
+}