Merge pull request #68 from crdschurch/defect/DE2885-use-inline-svgs

DE2885 - Use Inline SVG

README.md

@@ -43,9 +43,9 @@ If using webpack, the `copy-webpack-plugin` can be used to move the svg files to
 plugins: [
     new CopyWebpackPlugin([
       {
-        context: './node_modules/crds-styles/assets/stylesheets/svg/assets',
+        context: './node_modules/crds-styles/assets/svgs/',
         from: '*.svg',
-        to: 'assets',
+        to: 'assets'
       }
     ])
   ]

assets/stylesheets/bootstrap.scss

@@ -9,5 +9,4 @@
 @import 'base/modules';
 @import 'components/modules';
 @import 'themes/modules';
-@import 'svg/sprite';
 @import 'utilities/modules';

assets/stylesheets/components/_button-form-group.scss

@@ -6,23 +6,18 @@
           background: $cr-teal;
           border-color: $cr-teal;
           color: $cr-white;
-
-          .icon {
-            filter: invert(100%);
-          }
         }
 
-        .svg-check-circle {
+        .icon.check-circle {
           display: none;
         }
 
         &.active {
-          .svg-check-circle {
+          .icon.check-circle {
             display: inline-block;
-            filter: invert(100%);
           }
 
-          .svg-circle-thin {
+          .icon.circle-thin {
             display: none;
           }
         }
@@ -38,14 +33,7 @@
 
     .custom-input-icon {
       padding: 10px;
-
-      i {
-        filter: invert(55%);
-
-        .dark-theme & {
-          filter: invert(45%);
-        }
-      }
+      color: $cr-gray-light;
     }
 
     .custom-input-field {
@@ -62,9 +50,7 @@
 
     .btn-group-icons {
       padding-right: .5rem;
-
       .icon {
-        filter: invert(55%);
         vertical-align: middle;
       }
     }

assets/stylesheets/components/_datepicker.scss

@@ -70,21 +70,18 @@ datepicker {
   }
 
   .glyphicon {
+    @extend .icon;
+    @extend .icon-1;
+
     &.glyphicon-chevron-left {
-      @extend .svg-chevron-left;
-    }
-    &.glyphicon-chevron-right {
-      @extend .svg-chevron-right;
+      @extend .chevron-left;
     }
-  }
-  datepicker-inner .glyphicon {
-    &.glyphicon-chevron-left,
     &.glyphicon-chevron-right {
-      @extend .icon;
-      @extend .icon-1;
+      @extend .chevron-right;
     }
-  }
 
+    background-size: cover;
+  }
 
   tbody {
     .btn {

assets/stylesheets/components/_forms.scss

@@ -67,6 +67,10 @@ textarea {
   position: relative;
   display: block;
 
+  .input-group-addon {
+    color: $cr-gray;
+  }
+
   &.input-group-left {
     input.form-control {
       padding-right: 10px;

assets/stylesheets/components/_icons.scss

@@ -1,25 +1,101 @@
 $dimensions: 16px;
 
-i {
-  text-indent:200%;
-  white-space:nowrap;
-  overflow:hidden;
-  display:inline-block;
-  background-size:32px 32px;
+%icon-dimensions {
+	width: $dimensions * 2;
+	height: $dimensions * 2;
+	background-size: $dimensions * 2;
+	@for $i from 1 through 6 {
+		&.icon-#{$i} {
+			width: $dimensions * $i;
+			height: $dimensions * $i;
+			background-size: $dimensions * $i;
+		}
+	}
+}
+
+.icon:not(svg) {
+	text-indent: 200%;
+	white-space: nowrap;
+	overflow: hidden;
+	display: inline-block;
+	background-size: 32px 32px;
 }
 
 svg.icon {
-  width: $dimensions * 2;
-  height: $dimensions * 2;
-  @for $i from 1 through 6 {
-    &.icon-#{$i} {
-      width: $dimensions * $i;
-      height: $dimensions * $i;
-      background-size: $dimensions * $i;
-    }
-  }
-
-  use {
-    fill: currentColor;
-  }
+	@extend %icon-dimensions;
+	use {
+		fill: currentColor;
+	}
+}
+
+%svg-common {
+	background-image: url("assets/svgs/icons.css.svg");
+	background-repeat: no-repeat;
+	@extend %icon-dimensions;
+
+	.dark-theme & {
+		filter: invert(75%);
+		-webkit-filter: invert(75%);
+	}
+}
+
+.icon.calendar:not(svg) {
+	@extend %svg-common;
+	background-position: 0 0;
+}
+
+.icon.check-circle:not(svg) {
+	@extend %svg-common;
+	background-position: 0 9.090909090909092%;
+}
+
+.icon.chevron-left:not(svg) {
+	@extend %svg-common;
+	background-position: 0 18.181818181818183%;
+}
+
+.icon.chevron-right:not(svg) {
+	@extend %svg-common;
+	background-position: 0 27.272727272727273%;
+}
+
+.icon.circle-thin:not(svg) {
+	@extend %svg-common;
+	background-position: 0 36.36363636363637%;
 }
+
+.icon.contrast:not(svg) {
+	@extend %svg-common;
+	background-position: 0 45.45454545454545%;
+}
+
+.icon.facebook:not(svg) {
+	@extend %svg-common;
+	background-position: 0 54.54545454545455%;
+}
+
+.icon.github:not(svg) {
+	@extend %svg-common;
+	background-position: 0 63.63636363636363%;
+}
+
+.icon.instagram:not(svg) {
+	@extend %svg-common;
+	background-position: 0 72.72727272727273%;
+}
+
+.icon.twitter:not(svg) {
+	@extend %svg-common;
+	background-position: 0 81.81818181818181%;
+}
+
+.icon.usd:not(svg) {
+	@extend %svg-common;
+	background-position: 0 90.9090909090909%;
+}
+
+.icon.youtube:not(svg) {
+	@extend %svg-common;
+	background-position: 0 100%;
+}
+

assets/stylesheets/components/_modules.scss

@@ -1,3 +1,4 @@
+@import 'icons';
 @import 'typography';
 @import 'headings';
 @import 'alerts';
@@ -7,4 +8,3 @@
 @import 'buttons';
 @import 'button-form-group';
 @import 'tables';
-@import 'icons';