Merge pull request #938 from cfpb/ans_remove_icon_deps

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

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( @name )`,
+where `@name` is the SVG icon canonical name.
 
 ## Rotating update icon
 

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)

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';

packages/cf-forms/src/atoms/select.less

@@ -64,7 +64,7 @@
         background-color: @select-icon-bg;
         content: '';
         pointer-events: none;
-        background-image: url( '@{cf-icon-path}/down.svg' );
+        .u-svg-inline-bg( 'down' );
         background-size: auto @cf-icon-height;
         background-repeat: no-repeat;
         background-position: center center;

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

packages/cf-forms/src/molecules/form-fields.less

@@ -121,7 +121,7 @@
             }
 
             &:checked + .a-label:before {
-                background-image: url( '@{cf-icon-path}/approved.svg' );
+                .u-svg-inline-bg( 'approved' );
                 background-size: auto @cf-icon-height;
                 background-repeat: no-repeat;
                 background-position: center 0;

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"
   ]

packages/cf-icons/src/cf-icons-svg-inline.js

@@ -0,0 +1,30 @@
+const path = require( 'path' );
+
+/**
+ * This file is a less plugin that gets included in a less file via the
+ * `@plugin "cf-icons-svg-inline";` syntax.
+ * The `install` function and the `function.add()` method are the hooks
+ * necessary for the less preprocessor to pick this up and run it at build-time.
+ * The plugin name specified in the less file, this file's filename,
+ * and the name passed to `function.add()` must all be the same.
+ * See http://lesscss.org/features/#plugin-atrules-feature-writing-your-first-plugin
+ */
+
+module.exports = {
+  install: function( less, pluginManager, functions ) {
+    functions.add( 'cf-icons-svg-inline', svgName => {
+      // Retrieve this plugin script's 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;
+    } );
+  }
+}

packages/cf-icons/src/cf-icons.less

@@ -11,31 +11,43 @@
 // 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 1000 (w) x 1200 (h).
+// 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( @name ) {
+    @svg: cf-icons-svg-inline( @name );
+    background-image: url( 'data:image/svg+xml;charset=UTF-8,@{svg}' );
+}
 
 //
-// 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;
     }
 

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( @name )`,
+where `@name` is the SVG icon canonical name.
 
 ## Rotating update icon
 

packages/cf-tables/src/cf-tables.less

@@ -21,7 +21,8 @@
 // Import external dependencies
 //
 
-@import '../../cf-core/src/cf-core.less';
+@import (reference) '../../cf-core/src/cf-core.less';
+@import (reference) '../../cf-icons/src/cf-icons.less';
 
 // Mixins
 .striped-table() {
@@ -81,14 +82,20 @@
         outline: none;
         text-align: left;
         text-transform: inherit;
-    }
 
-    .sortable:after {
-        display: inline-block;
-        position: relative;
-        top: -1px;
-        content: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAAXUlEQVR4AWPABZw9/C4A8Qlscvg0LQXi/1A8k1hNjXBNCFxNSFMcXDEmjsOlyQakgAB2RNckD8S/idD4D4jVYZq4gfgJXJIwfgPEIiCNt0ECJOKXII13gPgTifgaAHk0kQqUakHYAAAAAElFTkSuQmCC );
-        visibility: hidden;
+        &:after {
+            display: inline-block;
+            position: relative;
+            vertical-align: bottom;
+            content: '';
+            visibility: hidden;
+            .u-svg-inline-bg( 'down' );
+            background-size: auto @cf-icon-height;
+            background-repeat: no-repeat;
+            background-position: center center;
+            height: @cf-icon-height;
+            width: 1em;
+        }
     }
 
     .sortable:hover:after,
@@ -99,10 +106,13 @@
 
     .sortable.sorted-down:after,
     .sortable.sorted-up:hover:after {
+        top: 1px;
         transform: rotate( 180deg );
     }
 
+    .sortable.sorted-up:after,
     .sortable.sorted-down:hover:after {
+        top: -1px;
         transform: rotate( 0deg );
     }
 }