Open terotik opened 7 years ago
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
Oh, and if we use svg-sprite we need polyfill for some browsers https://github.com/jonathantneal/svg4everybody
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
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} />;
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)
Yeah, that's expected and should work.
url-loader
returns a data:
URL, which is perfectly cromulent to use as src
.
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>
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...
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?
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
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
.
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:
File loader seems to fit these points.
Replace icons that can be replaced with new visual style ones. Maybe even test and use the up-and-coming svg-icon library.