Feature request: Converting SCSS icons variables to Map Array #12989
Description
I made a test by switching the hundreds of variables in the icons.scss file to a single variable as a map array and noticed that the SCSS compilation process is a lot faster now. So I think it would be a good thing to update it.
For the information, I use a SCSS compilator on the websites I work on. It auto-compiles the SCSS that has been edited live on the client FTP. It is called scssphp.php.
Since I added the new Font Awesome 5 scss files, I noticed the compilator would take up to 20 seconds to compile my SCSS structure. Now that I use the map array, it compiles it in about 3 seconds.
I discovered this method in the new version of Bootstrap 4, that uses mostly map arrays.
Before
This is the initial code in _variables.scss:
$fa-var-500px: \f26e;
$fa-var-accessible-icon: \f368;
$fa-var-accusoft: \f369;
$fa-var-address-book: \f2b9;
$fa-var-address-card: \f2bb;
$fa-var-adjust: \f042;
[...]
And in the _icons.scss:
.#{$fa-css-prefix}-500px:before { content: fa-content($fa-var-500px); }
.#{$fa-css-prefix}-accessible-icon:before { content: fa-content($fa-var-accessible-icon); }
.#{$fa-css-prefix}-accusoft:before { content: fa-content($fa-var-accusoft); }
.#{$fa-css-prefix}-address-book:before { content: fa-content($fa-var-address-book); }
.#{$fa-css-prefix}-address-card:before { content: fa-content($fa-var-address-card); }
.#{$fa-css-prefix}-adjust:before { content: fa-content($fa-var-adjust); }
[...]
After
This is the new code in _variables.scss:
$fa-icons: () !default;
$fa-icons: map-merge((
'500px': '\f26e',
'accessible-icon': '\f368',
'accusoft': '\f369',
'address-book': '\f2b9',
'address-card': '\f2bb',
'adjust': '\f042',
[...]
), $fa-icons);
And in the _icons.scss:
@each $icon, $value in $fa-icons {
.#{$fa-css-prefix}-#{$icon}:before {content: $value;}
}