[GH-ISSUE #443] Feature request: Be able to exclude squared (1x1) flags from CSS using Sass/Less variable #265

New issue

Closed

opened 2026-03-03 14:35:56 +03:00 by kerem · 2 comments

kerem commented

2026-03-03 14:35:56 +03:00

Owner

Originally created by @Klooven on GitHub (Mar 20, 2018).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/443

As probably most of the sites using the flag icons only use the 4x3 format of the flags, I'd think that there could be a variable to exclude squared flags from the CSS when building it (would result in smaller CSS file). For example .flag-icon-ae would be kept, but .flag-icon-ae.flag-icon-squared would not be included in the CSS.

How does that sound?

Here's an exaple SCSS implementation (not tested):

//_variables.scss
$flag-icon-square-enabled: true !default;

//_flag-icon-base.scss
.flag-icon {
  @extend .flag-icon-background;
  position: relative;
  display: inline-block;
  width: (4 / 3) * 1em;
  line-height: 1em;
  &:before {
    content: '\00a0';
  }
  &.flag-icon-squared {
    //Exclude if var is false!
    @if $flag-icon-square-enabled {
      width: 1em;
    }
  }
}

//other stuff excluded for brevity

@mixin flag-icon($country) {
  .flag-icon-#{$country} {
    background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
    &.flag-icon-squared {
      //Exclude if var is false!
      @if $flag-icon-square-enabled {
        background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
      }
    }
  }
}

Sass reference for @if

Originally created by @Klooven on GitHub (Mar 20, 2018). Original GitHub issue: https://github.com/lipis/flag-icons/issues/443 As probably most of the sites using the flag icons only use the **`4x3`** format of the flags, I'd think that there could be a variable to exclude squared flags from the CSS when building it (would result in smaller CSS file). For example `.flag-icon-ae` would be kept, but `.flag-icon-ae.flag-icon-squared` would not be included in the CSS. **How does that sound?** Here's an exaple SCSS implementation (not tested): ``` //_variables.scss $flag-icon-square-enabled: true !default; //_flag-icon-base.scss .flag-icon { @extend .flag-icon-background; position: relative; display: inline-block; width: (4 / 3) * 1em; line-height: 1em; &:before { content: '\00a0'; } &.flag-icon-squared { //Exclude if var is false! @if $flag-icon-square-enabled { width: 1em; } } } //other stuff excluded for brevity @mixin flag-icon($country) { .flag-icon-#{$country} { background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg); &.flag-icon-squared { //Exclude if var is false! @if $flag-icon-square-enabled { background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg); } } } } ``` Sass [reference](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if) for `@if`

kerem closed this issue

2026-03-03 14:35:57 +03:00

kerem commented

2026-03-03 14:35:57 +03:00

Author

Owner

@re-thc commented on GitHub (Jul 8, 2019):

Would be good to have 2 separate css outputs for distribution as well (e.g. for cdn usage)

@re-thc commented on GitHub (Jul 8, 2019): Would be good to have 2 separate css outputs for distribution as well (e.g. for cdn usage)

kerem commented

2026-03-03 14:35:58 +03:00

Author

Owner

@lipis commented on GitHub (Oct 23, 2021):

PRs are welcome for this one.. It's more about the flags

@lipis commented on GitHub (Oct 23, 2021): PRs are welcome for this one.. It's more about the flags

kerem referenced this issue

2026-03-03 14:40:27 +03:00

[PR #265] [CLOSED] Allow to exclude squared flags from build #720