question: icons are greater than SVG parent element

[jpogeant]

Describe the bug

The display of the flags (maybe other icons) is greater than the SVG parent element.

Here is an example with SVG element with height/width sizes to 16px

Steps to reproduce

Here is the steps to reproduce (Vanilla React with Webpack)

1. Add the package @vtmn/assets
2. Add the Webpack File loader to the config

// For example
{
  test: /\.svg$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        sourceMap: isEnvDevelopment,
      },
    },
  ],
},

3. Use the package inside the project code (sprite way)

import flags from '@vtmn/assets/dist/assets/sprite/assets.svg';

// ...

return (
  <svg width="16" height="16" fill="#001018">
    // I use href because xlink:href is deprecated
    // cf: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
    <use href={`${flags}#flag-at`} />
  </svg>
);

4. Check inside the browser

Expected behavior

The icon element MUST have the same size as the SVG element have.

Browsers affected

• Chrome
• Firefox
• (Maybe more)

Version affected

@vtmn/assets: v0.1.3

[lauthieb]

Hi @jpogeant, thanks for your issue. I think it is not a bug from Vitamin side, but let's check together. Can you please apply the advice from this answer and let me know if it's better? https://stackoverflow.com/a/39062462 Thanks in advance :)

[lauthieb]

Hi @jpogeant, is it okay for you? @thibault-mahe feel free to check if my answer is correct in your opinion. Thanks!

[lauthieb]

This is a stale issue. I close it, feel free to reopen if needed.

[ghost]

Hi,

I tested using the advice from the StackOverflow answer, without success. The sprite seems to have a mismatching between viewBox et symbol sizes.

Using dynamic imports and SVGs directly this seems to be better.

[thibault-mahe]

Hi @jpogeant , I tried locally with the config you gave (except that I use the Asset Modules webpack config with Nextjs) and it seems to work well:

There's been some change recently on the icons assets, with a PR removing the height/width of the svg. Maybe this is linked to your issue. Do you have the last release of the @vtmn/assets ?

[ghost]

Hi @thibault-mahe

Everything is working know 🙌

I think removing height/width was the thing!