Icon SCSS design bloating CSS size

Post Reply
fabio_scala
Posts: 3
Joined: 30 Sep 2018, 10:48

30 May 2019, 04:26

Issue: The `ui-icon` and `pi-` icon overrides in the Ultima theme use `@include` which leads to hundreds of blocks like these in the compiled CSS:

Code: Select all

.ui-icon-hotel {
    font-family: "Material Icons";
    font-weight: 400;
    font-style: normal;
    font-size: 1.5em;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    text-indent: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga"
}
This approach bloats the CSS and actually makes up more than 1/3 of my CSS. Instead you should be using either a separate class (eg. like `.pi` and `.ui-icon`) for the common styles or an attribute selector like `[class^='ui-icon-'], [class*=' ui-icon-']`.
Obviously, I have means to workaround this myself, but it would be nice if I don't have to hack the shipped Ultima theme to fix things like these. Hope you can incorporate this.

Best, Fabio

merve7
Posts: 459
Joined: 12 Sep 2017, 10:44

31 May 2019, 11:31

Hi,
Thank you for your feedback. We changed our _icons.scss file and our override style. We added a new variable ($iconPrefix), you can use this attribute for common style. We will release the new version today (May 31).

fabio_scala
Posts: 3
Joined: 30 Sep 2018, 10:48

08 Jun 2019, 11:06

Hello and thank you for the quick update.

I was able to check out the new version. And unfortunately, I think you misunderstood my issue.
The issue is, that the generated CSS file is HUGE because you guys basically use extension (using `@include`) for all your icons (hundreds...).

This issue still persists in the current version and should definitely be fixed in the future.

Again, there are hundreds of blocks like these making up thousands of lines of compiled CSS:

Code: Select all

.ui-icon-web {
    font-family: "Material Icons";
    font-weight: 400;
    font-style: normal;
    font-size: 1.5em;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    text-indent: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga"
}

Code: Select all

.pi.pi-angle-up {
    font-family: "Material Icons";
    font-weight: 400;
    font-style: normal;
    font-size: 1.5em;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    text-indent: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
Best, Fabio

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests