Visitar URL original
About icon aspect ratio · Issue #353 · unplugin/unplugin-icons · GitHub
Skip to content

About icon aspect ratio #353

Open
iconify/iconify
#3521

Description

@KeroZhai

Describe the bug

Some icons do not have a 1:1 aspect ratio, such as ActiveCampaign in SVG Logos, but unplugin-icons defaults to setting both width and height to 1.2em.

By the way, the same icon looks perfect in Icônes.

Reproduction

NA

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Xeon(R) Gold 6254 CPU @ 3.10GHz
    Memory: 10.21 GB / 24.00 GB
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
    pnpm: 7.6.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 113.0.5672.127
    Edge: Spartan (44.19041.1266.0), Chromium 
(122.0.2365.59)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

pnpm

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

Activity

  1. Muhlex commented on Apr 7, 2026

    @Muhlex

    I also think it'd be very beneficial if one could omit width/height, for example via the iconCustomizer. For example the Iconify loader allows setting "unset" to strip these attributes (https://iconify.design/docs/libraries/utils/examples/export-svg-from-icon-set.html#icon-size). Because this loader is used under the hood I tried this config:

    iconCustomizer(_collection, _icon, props) {
      props.width = 'unset'
    },

    But then the literal "unset" string is added back again. I presume by some other tool/process in the chain.


    EDIT: Found a semi-clean workaround for the time being. Here is an example config:

    Icons({
      // `0` triggers a special case where unplugin-icons
      // does not add width/height attributes at all:
      scale: 0,
      iconCustomizer(_collection, _icon, props) {
         // Explicitly only set height so width is automatically calculated:
        props.height = '1.25em'
      },
    })
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions