Use new brand icons

[terotik]

Replace icons that can be replaced with new visual style ones. Maybe even test and use the up-and-coming svg-icon library.

[terotik]

Icon library available here for testing:
https://github.com/City-of-Helsinki/hel-icons
Both combined sprite and individual optimised shapes available.

Tried to implement svg icons about this way on the app, but failed. More React/Webpack skill needed.
https://stories.jotform.com/our-icon-workflow-3fa1489226a

[terotik]

Oh, and if we use svg-sprite we need polyfill for some browsers https://github.com/jonathantneal/svg4everybody

[terotik]

This is the minimal solution, but I don't know how to get the url of asset loaded from npm modules in react/webpack:
https://codepen.io/willianjusten/pen/bedoLV

[akx]

Since url-loader is already configured for SVGs, all you (should) need to do to get an URL to an SVG is

import TicketImage from 'hel-icons/dist/ticket.svg'; // or wherever
const TicketImageElement = () => <img src={TicketImage} />;

[terotik]

I think I tried that, but current loader configuration returns base64 encoded svg data instead of url to the file. (I have to recheck, but I THINK this is what happened when I tried)

[akx]

Yeah, that's expected and should work.

url-loader returns a data: URL, which is perfectly cromulent to use as src.

[terotik]

data doesn't work with svg-sprite workflow, need url to the file

<svg>
  <use xlink:href="path/to/the/file.svg#icon-name"></use>
</svg>

[akx]

You don't really gain much by using SVG sprites here, since url-loader ends up bundling the data urls in the JS bundle anyway, and there's no extra download overhead there.

Anyway, there's a loader for that...

[terotik]

I tried that loader already (used in the example workflow that I linked in first comment) but my webpack/react skills fail there. I didn't really get how to refer to the loaded icons. And it seems a bit overkill as our icon-library serves already optimised svg-icon-sprite package.

If we use individual icons as data url, then I would need to build a component that does the import dynamically depending on component props. i.e.:

<HelIcon icon="comment-o" />

helicon.js

import requiredIcon from 'hel-icons/dist/shapes/${props.icon}.svg';

How to do the dynamic import?

[akx]

Webpack's context thing deals with that. I recall this is a Webpack 1 project still, so see the docs here... http://webpack.github.io/docs/context.html

[terotik]

This workflow I was using as reference uses require.context with svg-sprite-loader but I got 'require.context' is undefined in this project so didn't experiment that route further.

I guess I could try a simple component with an expression on request.

[jussiarpalahti]

I was thinking something like this: https://github.com/webpack-contrib/file-loader

Essentially this is just one SVG file that can be referenced in multiple places or set of small files each referenced individually. Thus, two things need to happen:

• get asset URL
• have asset be available in distribution with said URL

File loader seems to fit these points.