Add u-svg-inline-bg mixin for inline background SVG icons

cfpb · Jul 9, 2019 · aec76e0 · aec76e0
1 parent b574625
commit aec76e0
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 32 deletions.
diff --git a/docs/_includes/usage/cf-icons/usage.md b/docs/_includes/usage/cf-icons/usage.md
@@ -137,6 +137,13 @@ match the height. The whitespace to the left or right may not be quite
 accurate, but we determined this is an acceptable difference for a legacy
 browser like IE9.
 
+## Inline SVG background
+
+In some cases we embed an SVG as a background image.
+To accomplish this, a custom less plugin is used to inject the SVG icon source
+file inline into the CSS `background-image` property.
+This is exposed via a mixin, `.u-svg-inline-bg( @type )`,
+where `@type` is the SVG icon canonical name.
 
 ## Rotating update icon
 

diff --git a/docs/_includes/usage/cf-typography/usage.md b/docs/_includes/usage/cf-typography/usage.md
@@ -15,6 +15,7 @@ and has more basic typography patterns.
 
 - [Variables](#variables)
     - [Color variables](#color-variables)
+    - [Font variables](#font-variables)
     - [Font source variables](#font-source-variables)
 - [Headings](#headings)
     - [Heading with icon](#heading-with-icon)

diff --git a/docs/dist/css/main.css b/docs/dist/css/main.css
diff --git a/docs/dist/icons/approved.svg b/docs/dist/icons/approved.svg
diff --git a/docs/dist/icons/down.svg b/docs/dist/icons/down.svg
diff --git a/docs/src/css/main.less b/docs/src/css/main.less
@@ -19,10 +19,6 @@
 @import (less) "../../../packages/cf-expandables/src/cf-expandables.less";
 @import (less) "../../../packages/cf-tables/src/cf-tables.less";
 
-// Icon font path.
-// When SVGs are used as e.g. background images, we need a path to them.
-@cf-icon-path: '../icons';
-
 // Webfont variables
 // This is the path for self-hosted fonts.
 @cf-fonts-path: '/static/fonts';

diff --git a/packages/cf-forms/src/atoms/select.less b/packages/cf-forms/src/atoms/select.less
@@ -64,10 +64,7 @@
         background-color: @select-icon-bg;
         content: '';
         pointer-events: none;
-        background-image: url( '@{cf-icon-path}/down.svg' );
-        background-size: auto @cf-icon-height;
-        background-repeat: no-repeat;
-        background-position: center center;
+        .u-svg-inline-bg( 'down' );
     }
 }
 

diff --git a/packages/cf-forms/src/cf-forms.less b/packages/cf-forms/src/cf-forms.less
@@ -6,11 +6,6 @@
 // Theme variables
 //
 
-// Default icon font path.
-// When SVGs are used for background images, we need a path to them.
-// May be overridden when this package is imported into implementing less files.
-@cf-icon-path: '../icons';
-
 // Color variables
 
 // .a-text-input borders

diff --git a/packages/cf-forms/src/molecules/form-fields.less b/packages/cf-forms/src/molecules/form-fields.less
@@ -121,10 +121,7 @@
             }
 
             &:checked + .a-label:before {
-                background-image: url( '@{cf-icon-path}/approved.svg' );
-                background-size: auto @cf-icon-height;
-                background-repeat: no-repeat;
-                background-position: center 0;
+                .u-svg-inline-bg( 'approved' );
             }
         }
     }

diff --git a/packages/cf-icons/package.json b/packages/cf-icons/package.json
@@ -4,9 +4,6 @@
   "description": "Capital Framework icons",
   "less": "src/cf-icons.less",
   "style": "cf-icons.css",
-  "dependencies": {
-    "cf-core": "^10.2.1"
-  },
   "keywords": [
     "icons"
   ]

diff --git a/packages/cf-icons/src/cf-icons-svg-inline.js b/packages/cf-icons/src/cf-icons-svg-inline.js
@@ -0,0 +1,20 @@
+const path = require( 'path' );
+
+module.exports = {
+  install: function( less, pluginManager, functions ) {
+    functions.add( 'cf-icons-svg-inline', svgName => {
+      // Retrieve this plugin scripts path so we can fake __dirname.
+      const thisScriptPath = less.importManager.context.pluginManager.installedPlugins[0].filename;
+
+      // __dirname is not accessible in this script, so this fakes it.
+      const __dirname = path.dirname( thisScriptPath );
+
+      const svg = less.fs.readFileSync(
+        path.join( __dirname, `./icons/${ svgName.value }.svg` ),
+        'utf8'
+      );
+
+      return svg;
+    } );
+  }
+}
diff --git a/packages/cf-icons/src/cf-icons.less b/packages/cf-icons/src/cf-icons.less
@@ -11,31 +11,47 @@
 // Size variables
 //
 
-// Icon height matches the 19px rendered canvas of text set in Avenir Next
-// sized at 16px ( 19/16 = 1.1875 )
+// Icon SVGs viewbox is 1200 (h) x 1000 (w).
+// The height matches the 19px rendered canvas of text set in Avenir Next
+// sized at 16px (19/16 = 1.1875).
 @cf-icon-height: 1.1875em;
 
+//
+// Embedded inline SVG data URLs.
+//
+
+// Mixin to inject an SVG from the ./icons/ directory
+// into a background-image property.
+@plugin "cf-icons-svg-inline";
+.u-svg-inline-bg( @type ) {
+    @svg: cf-icons-svg-inline( @type );
+    background-image: url( 'data:image/svg+xml;charset=UTF-8,@{svg}' );
+    background-size: auto @cf-icon-height;
+    background-repeat: no-repeat;
+    background-position: center center;
+    height: @cf-icon-height;
+}
 
 //
-// The basics
+// The basics.
 //
 
 .cf-icon-svg {
     height: @cf-icon-height;
     vertical-align: text-top;
     fill: currentColor;
 
-    // IE 10 & 11 require a max-width otherwise the SVG takes up 100%
+    // IE 10 & 11 require a max-width otherwise the SVG takes up 100%.
     max-width: 1em;
 
     .lt-ie10 & {
-        // IE 9 require a width otherwise the SVG takes up 100%
+        // IE 9 require a width otherwise the SVG takes up 100%.
         width: 1em;
     }
 
     .lt-ie9 & {
-        // IE 8 doesn't support currentColor, hide icons and let the paired
-        // text stand on its own
+        // IE 8 doesn't support currentColor,
+        // hide icons and let the paired text stand on its own.
         display: none;
     }
 

diff --git a/packages/cf-icons/usage.md b/packages/cf-icons/usage.md
@@ -137,6 +137,13 @@ match the height. The whitespace to the left or right may not be quite
 accurate, but we determined this is an acceptable difference for a legacy
 browser like IE9.
 
+## Inline SVG background
+
+In some cases we embed an SVG as a background image.
+To accomplish this, a custom less plugin is used to inject the SVG icon source
+file inline into the CSS `background-image` property.
+This is exposed via a mixin, `.u-svg-inline-bg( @type )`,
+where `@type` is the SVG icon canonical name.
 
 ## Rotating update icon
 

diff --git a/packages/cf-tables/src/cf-tables.less b/packages/cf-tables/src/cf-tables.less
@@ -22,6 +22,7 @@
 //
 
 @import '../../cf-core/src/cf-core.less';
+@import '../../cf-icons/src/cf-icons.less';
 
 // Mixins
 .striped-table() {
@@ -86,9 +87,11 @@
     .sortable:after {
         display: inline-block;
         position: relative;
-        top: -1px;
-        content: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAAXUlEQVR4AWPABZw9/C4A8Qlscvg0LQXi/1A8k1hNjXBNCFxNSFMcXDEmjsOlyQakgAB2RNckD8S/idD4D4jVYZq4gfgJXJIwfgPEIiCNt0ECJOKXII13gPgTifgaAHk0kQqUakHYAAAAAElFTkSuQmCC );
+        top: 4px;
+        content: '';
         visibility: hidden;
+        .u-svg-inline-bg( 'down' );
+        width: 1em;
     }
 
     .sortable:hover:after,