Stretched Icons when building project

[kritzl]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.8.0
• CLI Version: 3.9.1
• Nitro Version: 2.7.2
• Package Manager: npm@9.4.2
• Builder: -
• User Config: modules, ui
• Runtime Modules: @nuxt/ui@2.10.0
• Build Modules: -

Version

v2.10.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-6ersbm

Description

Icons from FontAwesome 6 are being stretched when executing the nuxi generate or nuxi build commands. The root cause of this issue is the removal of the viewBox attribute from the SVG data used for the mask-image. Unfortunately, I am unable to address this issue on my own. However, I came across some discussions that may be relevant:

• SVG viewBox attribute getting stripped in HTML parcel-bundler/parcel#1523
• What is the benefit of stripping viewBox? svg/svgo#1128
• [Docs] Wrong example config, e.g. removeViewBox option will not work  cpsoinos/nuxt-svgo#54

Additionally, I found a potential solution in case preventing the removal of the viewBox attribute proves to be challenging:

• Icon can't keep aspect ratio after project is built egoist/tailwindcss-icons#23

I assume this problem will affect all icon sets that have non-square icons.

Additional context

No response

Logs

No response

[benjamincanac]

Would passing the options to the plugin like mentioned in egoist/tailwindcss-icons#24 solve your issue?

We could imagine the icons option being either an array of collections, an all string or an object with the entire configuration.

[lavoscore]

I'm still having this bug, even after adding the extraProperties config. I tried putting it in both nuxt.config.ts and app.config.ts. Interestingly, the problem doesn't happen with some components that receive an icon property, like UBreadcrumb or UVerticalNavigation. Anything else I should look into?

[shurth]

I'm having the same issue as lavoscore @benjamincanac - even on edge. I saw it was merged to dev, but I'm not sure how often edge is updated w/ dev - safe to assume it should be there?

Also, not sure if it matters, but I'm using fontawesome pro w/ iconify.

[gobboo]

+1 Still an occurring issue, development is fine but building wise it stretches them out, building with SSR off on my end, and I'm not using fontawesome pro :)

[benjamincanac]

Adding -webkit-mask-size: contain; -webkit-mask-position: center; in extraProperties did not fix it? 🤔

[lammerfalcon]

i have the same issue((

[shurth]

@benjamincanac - I just resolved it by removing the 'webkit' prefix on the extraProperties. If someone else can give it a shot, this might just be a documentation update.

extraProperties: { "mask-size": "contain", "mask-position": "center" }

[gurvancampion]

@benjamincanac - I just resolved it by removing the 'webkit' prefix on the extraProperties. If someone else can give it a shot, this might just be a documentation update.

extraProperties: { "mask-size": "contain", "mask-position": "center" }

@shurth Thanks! I can confirm it works for me as well without the 'webkit' prefix. Here is my UI icons configuration in my nuxt.config.ts:

import { getIconCollections } from '@egoist/tailwindcss-icons'

export default defineNuxtConfig({
  ui: {
    icons: {
      extraProperties: { 'mask-size': 'contain', 'mask-position': 'center' },
      collections: { ...getIconCollections(['fa6-solid', 'circle-flags', 'simple-icons']) },
    },
  },
...
})

[benjamincanac]

What browser are you using? Should you not keep those with -webkit for Chrome?

[gurvancampion]

I'm using Chrome and Brave (Chromium), for both it works by removing the -webkit, otherwise it won't work