--- /dev/null
+// ICONIC\r
+// ------\r
+//\r
+// A sample of 24 flexible, easily schemable icons from the folks at Iconic.\r
+// \r
+// Features:\r
+// - 24 icons\r
+// - Built-in coloring and sizing classes\r
+// - Coloring mixin\r
+// - Angular support\r
+\r
+/// @Foundation.settings\r
+// Iconic\r
+$iconic-primary-fill: $primary-color !default;\r
+$iconic-primary-stroke: $primary-color !default;\r
+$iconic-accent-fill: $iconic-primary-fill !default;\r
+$iconic-accent-stroke: $iconic-accent-fill !default;\r
+///\r
+\r
+// Colors the fill, and optionally stroke, accent fill, and accent stroke of an Iconic icon.\r
+@mixin color-icon(\r
+ $fill,\r
+ $stroke: null,\r
+ $fillAccent: null,\r
+ $strokeAccent: null\r
+) {\r
+ * {\r
+ fill: $fill;\r
+\r
+ // Use the fill color if no stroke is provided\r
+ @if hasvalue($stroke) {\r
+ stroke: $stroke;\r
+ }\r
+ @else {\r
+ stroke: $fill;\r
+ }\r
+\r
+ &.iconic-property-accent {\r
+ // Use the fill color if no accent is provided\r
+ @if hasvalue($fillAccent) {\r
+ fill: $fillAccent;\r
+ }\r
+ @else {\r
+ fill: $fill;\r
+ }\r
+\r
+ // Use the normal stroke color if no accent is provided\r
+ @if hasvalue($strokeAccent) {\r
+ stroke: $strokeAccent;\r
+ }\r
+ @else {\r
+ // ...or use the fill if no normal stroke is provided\r
+ @if hasvalue($stroke) {\r
+ stroke: $stroke;\r
+ }\r
+ @else {\r
+ stroke: $fill;\r
+ }\r
+ }\r
+ }\r
+ }\r
+}\r
+\r
+@include exports(iconic) {\r
+ .iconic {\r
+ width: 1rem;\r
+ height: 1rem;\r
+ vertical-align: middle;\r
+\r
+ a > & {\r
+ @include color-icon($primary-color);\r
+ margin-top: -2px;\r
+ margin-right: 0.25rem;\r
+ }\r
+ }\r
+\r
+ .iconic * {\r
+ fill: $iconic-primary-fill;\r
+ stroke: $iconic-primary-stroke;\r
+\r
+ &.iconic-property-accent {\r
+ fill: $iconic-accent-fill;\r
+ stroke: $iconic-accent-stroke;\r
+ }\r
+ }\r
+\r
+ @each $color in map-keys($foundation-colors) {\r
+ .iconic-color-#{$color} {\r
+ @include color-icon(map-get($foundation-colors, $color));\r
+ }\r
+ }\r
+ .iconic-color-secondary {\r
+ @include color-icon($secondary-color);\r
+ }\r
+}\r