Inconsistent SVG size in the output

optimistic-raisin commented 1 year ago

Describe the bug SVG sizes are different though they have same font size, especially if they have different viewbox size.

To Reproduce

<svg height="596" width="2500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 190.80200000000002">
  <path d="M187.888 178.122H143.52l-13.573-32.738H56.003l-12.366 32.738H0L66.667 12.776h47.761zM91.155 52.286L66.912 116.53h50.913zM349.056 12.776h35.88v165.346h-41.219V74.842l-44.608 51.877h-6.301l-44.605-51.877V178.12h-41.219V12.776h35.88l53.092 61.336zM489.375 12.776c60.364 0 91.391 37.573 91.391 82.909 0 47.517-30.058 82.437-96 82.437h-68.369V12.776zm-31.762 135.041h26.906c41.457 0 53.823-28.129 53.823-52.377 0-28.368-15.276-52.363-54.308-52.363h-26.422v104.74zM662.769 51.981L610.797 0H800v189.21l-51.972-51.975V51.981zM662.708 62.397L609.2 115.903v74.899h74.889l53.505-53.506h-74.886z" />
</svg>

<svg height="986" viewBox="4.7 3.1 388.2 150.6" width="2500" xmlns="http://www.w3.org/2000/svg">
  <path d="m4.7 5.2h28.1v28.1h-28.1zm27.4 146.4v-101.3h-26.7v101.2h26.7zm176.8 1v-24.8c-3.9 0-7.2-.2-9.6-.6-2.8-.4-4.9-1.4-6.3-2.8s-2.3-3.4-2.8-6.1c-.4-2.5-.6-5.8-.6-9.8v-35.3h19.3v-22.9h-19.3v-39.4h-26.7v97.9c0 8.3.7 15.3 2.1 20.9 1.4 5.5 3.8 10 7.1 13.4s7.7 5.8 13 7.3c5.4 1.5 12.2 2.2 20.3 2.2zm152.8-1v-148.5h-26.7v148.5zm-224.5-91.3c-7.4-8-17.8-12-31-12-6.4 0-12.3 1.3-17.5 3.9-5.3 2.6-9.7 6.2-13.3 10.8l-1.4 1.9v-14.6h-26.3v101.2h26.5v-53.9 1.9c.3-9.5 2.6-16.5 7-21 4.7-4.8 10.4-7.2 16.9-7.2 7.7 0 13.6 2.4 17.5 7 3.8 4.6 5.8 11.1 5.8 19.4v53.8h26.9v-57.4c.1-14.4-3.7-25.8-11.1-33.8zm184 40.5c0-7.3-1.3-14.1-3.8-20.5-2.6-6.3-6.2-11.9-10.7-16.7-4.6-4.8-10.1-8.5-16.5-11.2s-13.5-4-21.2-4c-7.3 0-14.2 1.4-20.6 4.1-6.4 2.8-12 6.5-16.7 11.2s-8.5 10.3-11.2 16.7c-2.8 6.4-4.1 13.3-4.1 20.6s1.3 14.2 3.9 20.6 6.3 12 10.9 16.7 10.3 8.5 16.9 11.2c6.6 2.8 13.9 4.2 21.7 4.2 22.6 0 36.6-10.3 45-19.9l-19.2-14.6c-4 4.8-13.6 11.3-25.6 11.3-7.5 0-13.7-1.7-18.4-5.2-4.7-3.4-7.9-8.2-9.6-14.1l-.3-.9h79.5zm-79.3-9.3c0-7.4 8.5-20.3 26.8-20.4 18.3 0 26.9 12.9 26.9 20.3zm150.2 47.3c-.5-1.2-1.2-2.2-2.1-3.1s-1.9-1.6-3.1-2.1-2.5-.8-3.8-.8c-1.4 0-2.6.3-3.8.8s-2.2 1.2-3.1 2.1-1.6 1.9-2.1 3.1-.8 2.5-.8 3.8c0 1.4.3 2.6.8 3.8s1.2 2.2 2.1 3.1 1.9 1.6 3.1 2.1 2.5.8 3.8.8c1.4 0 2.6-.3 3.8-.8s2.2-1.2 3.1-2.1 1.6-1.9 2.1-3.1.8-2.5.8-3.8-.3-2.6-.8-3.8zm-1.6 7c-.4 1-1 1.9-1.7 2.6s-1.6 1.3-2.6 1.7-2 .6-3.2.6c-1.1 0-2.2-.2-3.2-.6s-1.9-1-2.6-1.7-1.3-1.6-1.7-2.6-.6-2-.6-3.2c0-1.1.2-2.2.6-3.2s1-1.9 1.7-2.6 1.6-1.3 2.6-1.7 2-.6 3.2-.6c1.1 0 2.2.2 3.2.6s1.9 1 2.6 1.7 1.3 1.6 1.7 2.6.6 2 .6 3.2-.2 2.2-.6 3.2zm-5.6-2.3c.8-.1 1.4-.4 1.9-.9s.8-1.2.8-2.2c0-1.1-.3-1.9-1-2.5-.6-.6-1.7-.9-3-.9h-4.4v11.3h2.1v-4.6h1.5l2.8 4.6h2.2zm-1.1-1.7h-2.5v-3.2h2.5c.3 0 .6.1.9.2s.5.3.6.5c.2.2.2.5.2.9s-.1.7-.2.9c-.2.2-.4.4-.6.5-.3.1-.6.2-.9.2z" />
</svg>

 <div class="mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
        <div class="col-span-1 flex items-center justify-center py-8 px-8">
          <NuxtIcon name="brand/amd" class="text-[8rem] text-gray-300" />
        </div>
        <div class="col-span-1 flex items-center justify-center py-8 px-8">
          <NuxtIcon name="brand/intel" class="text-[8rem] text-gray-300" />
        </div>
  </div>

These two svg have different height, however the width is same, in the output result. Also, using height: 2rem and font-size: 2rem has a very significant difference. To get the same result as height: 2rem font-size: 8rem needs to be used.

Expected behavior All the icons should have same height, if it has same font size. The font size is supposed to alter the height first and then width. (Correct me if I'm wrong here). Also, I suppose height and font-size should behave same, in this context.

Screenshots

Desktop (please complete the following information):

Operating System: Linux
Node Version: v16.18.1
Nuxt Version: 3.1.1
Nitro Version: 2.1.0
Package Manager: pnpm@7.26.0
Builder: vite
User Config: extends, app, modules
Runtime Modules: @nuxtjs/tailwindcss@6.3.0, nuxt-icons
Build Modules: -

Additional context

.nuxt-icon svg {
    /* width: 1em; */
    height: 1em;
    /* margin-bottom: 0.125em; */
    vertical-align: middle;
}

Disabling width somewhat gives the expected result. Also, margin-bottom seems redundant here.

I suppose, width and height are set to 1em to make the ratio square.

A option to override the default css would do the job probably.

yisibell commented 1 year ago

try this module https://github.com/yisibell/nuxt-svg-icons

gitFoxCode commented 1 year ago

You can easily change the default values using CSS,

.nuxt-icon svg { 
    width: x; 
    height: y; 
}

gitFoxCode / nuxt-icons