diff --git a/CHANGELOG.md b/CHANGELOG.md index f1dd68e..a098b32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.2.0] 2022-09-29 + +Fomantic-UI 2.9.0+ support only. If you need this script for FUI <= 2.8.8 or SUI, use 1.1.0 instead + +### Changed +- Adjusted templates to generate icon.variables for new LESS mapping as of FUI 2.9.0 + ## [1.1.0] 2022-09-28 This is the last minor version working with FUI < 2.9.0 and SUI 2.4.x diff --git a/README.md b/README.md index 21460e3..fb78100 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # [Fomantic-UI](https://github.com/fomantic/Fomantic-UI) Icon CLI Tool -Generate the `icon.overrides` and `icon.html.eco` files for Fomantic-UI up to 2.8.x (or Semantic-UI). +Generate the `icon.variables` and `icon.html.eco` files for Fomantic-UI 2.9.0+ + +> If you need this tool for FUI <= 2.8.8 or SUI, use version 1.1.0 You can use this script to generate the icons for free and pro versions of [FontAwesome](https://fontawesome.com). diff --git a/lib/static/corrections.json b/lib/static/corrections.json index c35ecc7..fb31b58 100644 --- a/lib/static/corrections.json +++ b/lib/static/corrections.json @@ -3,9 +3,6 @@ "name": "accessible", "className": "accessible" }, - "500px": { - "className": "\\35 00px" - }, "vimeo-v": { "name": "vimeo v", "className": "vimeo.v" diff --git a/package.json b/package.json index 1c932c0..4235321 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "create-fomantic-icons", - "version": "1.1.0", - "description": "A simple CLI to generate the icon.overrides and icon.html.eco files for FUI", + "version": "1.2.0", + "description": "A simple CLI to generate the icon.variables and icon.html.eco files for FUI", "author": "Sean Hamilton ", "license": "MIT", "homepage": "https://github.com/fomantic/create-fomantic-icons#readme", diff --git a/src/static/corrections.json b/src/static/corrections.json index 6d19ec0..1830047 100644 --- a/src/static/corrections.json +++ b/src/static/corrections.json @@ -3,9 +3,6 @@ "name": "accessible", "className": "accessible" }, - "500px": { - "className": "\\35 00px" - }, "vimeo-v": { "name": "vimeo v", "className": "vimeo.v" diff --git a/src/templates/icon.html.eco.liquid b/src/templates/icon.html.eco.liquid index 7b2c2de..5e4ca2b 100644 --- a/src/templates/icon.html.eco.liquid +++ b/src/templates/icon.html.eco.liquid @@ -36,6 +36,9 @@ themes : ['Default']
Fomantic includes a complete port of Font Awesome {{ version }} designed by the FontAwesome team for its standard icon set.
+
+ You can reduce your custom generated CSS by adjusting the @icons-map,@icons-outline-map, @icons-brand-map, ... variables in your themes icon.variables file to only the icons you need. +
{% for category in categories -%}
diff --git a/src/templates/icon.overrides.liquid b/src/templates/icon.overrides.liquid index 9234a6e..14fb0da 100644 --- a/src/templates/icon.overrides.liquid +++ b/src/templates/icon.overrides.liquid @@ -1,182 +1,3 @@ -/* -* Font Awesome {{ version }} by @fontawesome [https://fontawesome.com] -* License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License) -*/ - /******************************* - -Fomantic-UI integration of FontAwesome : - -// class names are separated -i.icon.angle-left => i.icon.angle.left - -// variations are extracted -i.icon.circle => i.icon.circle -i.icon.circle-o => i.icon.circle.outline - -// abbreviation are replaced by full words -i.icon.*-h => i.icon.*.horizontal -i.icon.*-v => i.icon.*.vertical -i.icon.alpha => i.icon.alphabet -i.icon.asc => i.icon.ascending -i.icon.desc => i.icon.descending -i.icon.alt => i.icon.alternate - - -Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand - + Theme Overrides *******************************/ - - -/******************************* - Icons -*******************************/ -& when(@variationIconDeprecated) { -/* Deprecated *In/Out Naming Conflict) */ -i.icon.linkedin.in::before { content: "\f0e1"; } -i.icon.zoom.in::before { content: "\f00e"; } -i.icon.zoom.out::before { content: "\f010"; } -i.icon.sign.in::before { content: "\f2f6"; } -i.icon.in.cart::before { content: "\f218"; } -i.icon.log.out::before { content: "\f2f5"; } -i.icon.sign.out::before { content: "\f2f5"; } -} - -{% if icons.solid.icons.length > 0 -%} -& when(@variationIconSolid) { -/******************************* - Solid Icons -*******************************/ - -/* Icons */ -{% for icon in icons.solid.icons -%} - i.icon.{{ icon.className }}::before { content: "{{ icon.unicode }}"; } -{% endfor %} -} -{% if icons.solid.aliases.length > 0 -%} -& when(@variationIconAliases) { -/* Aliases */ -{% for icon in icons.solid.aliases -%} - i.icon.{{ icon.className }}::before { content: "{{ icon.unicode }}"; } -{% endfor %} -} -{%- endif %}{%- endif %} - -{%- if icons.outline.icons.length > 0 %} -& when (@variationIconOutline) { -/******************************* - Outline Icons -*******************************/ - -/* Outline Icon */ - & when (@importOutlineIcons) { - /* Load & Define Icon Font */ - @font-face { - font-family: @outlineFontName; - src: @outlineFallbackSRC; - src: @outlineSrc; - font-style: normal; - font-weight: @normal; - font-variant: normal; - text-decoration: inherit; - text-transform: none; - } - } - - i.icon.outline { - font-family: @outlineFontName; - } - - /* Icons */ - {% for icon in icons.outline.icons -%} - i.icon.{{ icon.className }}::before { content: "{{ icon.unicode }}"; } - {% endfor %} - - {% if icons.outline.aliases.length > 0 -%} - & when(@variationIconAliases) { - /* Aliases */ - {% for icon in icons.outline.aliases -%} - i.icon.{{ icon.className }}::before { content: "{{ icon.unicode }}"; } - {% endfor %} - } - {%- endif %} -} -{%- endif %} - -{% if icons.thin.icons.length > 0 -%} -& when (@variationIconThin) { -/******************************* - Thin Icons -*******************************/ - -/* Thin Icon */ - & when (@importThinIcons) { - /* Load & Define Icon Font */ - @font-face { - font-family: @thinFontName; - src: @thinFallbackSRC; - src: @thinSrc; - font-style: normal; - font-weight: @normal; - font-variant: normal; - text-decoration: inherit; - text-transform: none; - } - } - - i.icon.thin { - font-family: @thinFontName; - } - - /* Icons */ - {% for icon in icons.thin.icons -%} - i.icon.{{ icon.className }}::before { content: "{{ icon.unicode }}"; } - {% endfor %} - - {% if icons.thin.aliases.length > 0 -%} - & when(@variationIconAliases) { - /* Aliases */ - {% for icon in icons.thin.aliases -%} - i.icon.{{ icon.className }}::before { content: "{{ icon.unicode }}"; } - {% endfor %} - } - {%- endif %} -} - -{%- endif %} - -{% if icons.brand.icons.length > 0 -%} -& when(@variationIconBrand) { -/******************************* - Brand Icons -*******************************/ - - & when (@importBrandIcons) { - /* Load & Define Brand Font */ - @font-face { - font-family: @brandFontName; - src: @brandFallbackSRC; - src: @brandSrc; - font-style: normal; - font-weight: @normal; - font-variant: normal; - text-decoration: inherit; - text-transform: none; - } - } - - /* Icons */ - {% for icon in icons.brand.icons -%} - i.icon.{{ icon.className }}::before { content: "{{ icon.unicode }}"; font-family: @brandFontName; } - {% endfor %} - - {% if icons.brand.aliases.length > 0 -%} - & when(@variationIconAliases) { - /* Aliases */ - {% for icon in icons.brand.aliases -%} - i.icon.{{ icon.className }}::before { content: "{{ icon.unicode }}"; font-family: @brandFontName; } - {% endfor %} - } - {%- endif %} -} -{%- endif %} diff --git a/src/templates/icon.variables.liquid b/src/templates/icon.variables.liquid index ed2223a..1735e9a 100644 --- a/src/templates/icon.variables.liquid +++ b/src/templates/icon.variables.liquid @@ -1,3 +1,32 @@ +/* +* Font Awesome {{ version }} by @fontawesome [https://fontawesome.com] +* License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License) +*/ + +/******************************* + +Fomantic-UI integration of FontAwesome : + +// class names are separated +i.icon.angle-left => i.icon.angle.left + +// variations are extracted +i.icon.circle => i.icon.circle +i.icon.circle-o => i.icon.circle.outline + +// abbreviation are replaced by full words +i.icon.*-h => i.icon.*.horizontal +i.icon.*-v => i.icon.*.vertical +i.icon.alpha => i.icon.alphabet +i.icon.asc => i.icon.ascending +i.icon.desc => i.icon.descending +i.icon.alt => i.icon.alternate + + +Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand + +*******************************/ + /******************************* Icon *******************************/ @@ -6,61 +35,122 @@ Font Files ---------------*/ -{% if icons.solid.icons.length > 0 -%} /* Solid Icons */ @importIcons: true; @fontName: 'icons'; -@src: - url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), - url("@{fontPath}/@{fontName}.woff2") format('woff2'), - url("@{fontPath}/@{fontName}.woff") format('woff'), - url("@{fontPath}/@{fontName}.ttf") format('truetype'), - url("@{fontPath}/@{fontName}.svg#icons") format('svg') -; -@fallbackSRC: url("@{fontPath}/@{fontName}.eot"); -{%- endif %} +@outlineFontName: 'outline-icons'; +@thinFontName: 'thin-icons'; +@brandFontName: 'brand-icons'; +@fonts: { +{% if icons.solid.icons.length > 0 -%} + @solid: { + font-family: @fontName; + src: url("@{fontPath}/@{fontName}.woff2") format('woff2') + if(@supportIE, e(',') url("@{fontPath}/@{fontName}.woff") format('woff')); + font-style : normal; + font-weight : @normal; + font-variant : normal; + text-decoration: inherit; + text-transform : none; + }; +{%- endif %} {% if icons.outline.icons.length > 0 -%} -/* Outline Icons */ -@importOutlineIcons: true; -@outlineFontName: 'outline-icons'; -@outlineSrc: - url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'), - url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'), - url("@{fontPath}/@{outlineFontName}.woff") format('woff'), - url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'), - url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg') -; -@outlineFallbackSRC: url("@{fontPath}/@{outlineFontName}.eot"); + @outline: { + font-family: @outlineFontName; + src: url("@{fontPath}/@{outlineFontName}.woff2") format('woff2') + if(@supportIE, e(',') url("@{fontPath}/@{outlineFontName}.woff") format('woff')); + font-style : normal; + font-weight : @normal; + font-variant : normal; + text-decoration: inherit; + text-transform : none; + }; {%- endif %} - {% if icons.thin.icons.length > 0 -%} -/* Thin Icons */ -@importThinIcons: true; -@thinFontName: 'thin-icons'; -@thinSrc: - url("@{fontPath}/@{thinFontName}.eot?#iefix") format('embedded-opentype'), - url("@{fontPath}/@{thinFontName}.woff2") format('woff2'), - url("@{fontPath}/@{thinFontName}.woff") format('woff'), - url("@{fontPath}/@{thinFontName}.ttf") format('truetype'), - url("@{fontPath}/@{thinFontName}.svg#icons") format('svg') -; -@thinFallbackSRC: url("@{fontPath}/@{thinFontName}.eot"); + @thin: { + font-family: @thinFontName; + src: url("@{fontPath}/@{thinFontName}.woff2") format('woff2') + if(@supportIE, e(',') url("@{fontPath}/@{thinFontName}.woff") format('woff')); + font-style : normal; + font-weight : @normal; + font-variant : normal; + text-decoration: inherit; + text-transform : none; + }; {%- endif %} - {% if icons.brand.icons.length > 0 -%} -/* Brand Icons */ -@importBrandIcons: true; -@brandFontName: 'brand-icons'; -@brandSrc: - url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'), - url("@{fontPath}/@{brandFontName}.woff2") format('woff2'), - url("@{fontPath}/@{brandFontName}.woff") format('woff'), - url("@{fontPath}/@{brandFontName}.ttf") format('truetype'), - url("@{fontPath}/@{brandFontName}.svg#icons") format('svg') -; -@brandFallbackSRC: url("@{fontPath}/@{brandFontName}.eot"); + @brand: { + font-family: @brandFontName; + src: url("@{fontPath}/@{brandFontName}.woff2") format('woff2') + if(@supportIE, e(',') url("@{fontPath}/@{brandFontName}.woff") format('woff')); + font-style : normal; + font-weight : @normal; + font-variant : normal; + text-decoration: inherit; + text-transform : none; + }; {%- endif %} +}; + +// Underscores in map keys will be replaced by dots to separate classnames at compile time + +/* Deprecated *In/Out Naming Conflict) */ +@icon-deprecated-map: { + linkedin_in:\f0e1; + zoom_in: \f00e; + zoom_out: \f010; + sign_in: \f2f6; + in_cart: \f218; + log_out: \f2f5; + sign_out: \f2f5; +}; + +/* Icons */ +@icon-map: { +{% for icon in icons.solid.icons -%} + {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }}; +{% endfor -%} +}; + +@icon-aliases-map: { +{% for icon in icons.solid.aliases -%} + {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }}; +{% endfor -%} +}; + +@icon-outline-map: { +{% for icon in icons.outline.icons -%} + {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }}; +{% endfor -%} +}; +@icon-outline-aliases-map: { +{% for icon in icons.outline.aliases -%} + {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }}; +{% endfor -%} +}; + +@icon-thin-map: { +{% for icon in icons.thin.icons -%} + {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }}; +{% endfor -%} +}; +@icon-thin-aliases-map: { +{% for icon in icons.thin.aliases -%} + {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }}; +{% endfor -%} +}; + +@icon-brand-map: { +{% for icon in icons.brand.icons -%} + {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }}; +{% endfor -%} +}; +@icon-brand-aliases-map: { +{% for icon in icons.brand.aliases -%} + {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }}; +{% endfor -%} +}; /*--------------