Openfoodnetwork: Create a SVG icon for question mark icon into shopfront for unit price

[jibees]

What we should change and why

Currently, this _icon_ is fully made with CSS that leads us to some alignment issues (see https://github.com/openfoodfoundation/openfoodnetwork/pull/6851#issuecomment-778805963)

The aim of this issue is to create a svg icon for this:

As we have a webfont (https://github.com/openfoodfoundation/openfoodnetwork/blob/master/app/assets/fonts/OFN-v2.svg), maybe it could be interesting to integrate this icon to this font file.

Context

This came up in PR https://github.com/openfoodfoundation/openfoodnetwork/pull/6851#issuecomment-778805963

[Erioldoesdesign]

Hahah github doesn't support uploading SVG...

Oh well: https://drive.google.com/file/d/17X7YSNbbmYlj0Ce-gAYbw3qnNeHUJGvp/view?usp=sharing

Can you try this one and see what it displays like? I think it's to spec e.g. 1px border and 50px x 50px 'canvas' size which should scale down to smaller as per the UI well enough but in my experience SVG in the front end isn't as exact a science as often hoped!

[jibees]

I think it's good !

If it's fit fo you, I'll assign myself this issue to implements the changes after #6851 has been merged.

[jibees]

For the record, the compressed svg icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="24.87" cy="24.87" r="24" fill="#f4f9fd" stroke="#cfe1f3" stroke-miterlimit="10"/><path d="M36.31 18.13c0 7.51-8.11 7.63-8.11 10.4v.71c0 .74-.6 1.34-1.34 1.34h-5.11c-.74 0-1.34-.6-1.34-1.34v-.97c0-4 3.04-5.61 5.33-6.89 1.97-1.1 3.17-1.85 3.17-3.31 0-1.93-2.46-3.21-4.46-3.21-2.6 0-3.8 1.23-5.48 3.36-.45.57-1.28.68-1.87.24l-3.12-2.36a1.35 1.35 0 01-.3-1.83c2.65-3.89 6.02-6.07 11.27-6.07 5.49-.02 11.36 4.27 11.36 9.93zM29 36.86c0 2.59-2.11 4.71-4.71 4.71s-4.71-2.11-4.71-4.71c0-2.59 2.11-4.71 4.71-4.71S29 34.27 29 36.86z" fill="#81b2e1"/></svg>

(i use https://jakearchibald.github.io/svgomg/ to reduce and simply each of my svg)

[Erioldoesdesign]

I think it's good !

If it's fit fo you, I'll assign myself this issue to implements the changes after #6851 has been merged.

Looks good to me 😄

[filipefurtad0]

Hey @jibees ,

The question mark symbol and its position look great now:

• Desktop (left, Chrome 89 - right Firefox 86)

Not related to this PR: The red line above relates to the fact that some .jpg images are not being displayed on Firefox... Hum, something to investigate.

• Mobile - iPhone/Safari

• Mobile - Android/Firefox

Ready to go!