@primer/styled-octicons 0.0.0-e76164b → 0.0.0-e79b4ff

package/dist/icons/SortAscIcon.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { compose, space, color } from 'styled-system';
+import css from '@styled-system/css';
+import styled from 'styled-components';
+
+var sizeMap = {
+  small: 16,
+  medium: 32,
+  large: 64
+};
+
+function getSvgProps(_ref) {
+  var ariaLabel = _ref['aria-label'],
+      className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
+      size = _ref.size,
+      verticalAlign = _ref.verticalAlign,
+      svgDataByHeight = _ref.svgDataByHeight;
+
+  var height = sizeMap[size] || size;
+  var naturalHeight = closestNaturalHeight(Object.keys(svgDataByHeight), height);
+  var naturalWidth = svgDataByHeight[naturalHeight].width;
+  var width = height * (naturalWidth / naturalHeight);
+  var path = svgDataByHeight[naturalHeight].path;
+
+  return {
+    'aria-hidden': ariaLabel ? 'false' : 'true',
+    'aria-label': ariaLabel,
+    role: 'img',
+    className: className,
+    viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
+    width: width,
+    height: height,
+    fill: fill,
+    style: {
+      display: 'inline-block',
+      userSelect: 'none',
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
+    },
+    dangerouslySetInnerHTML: { __html: path }
+  };
+}
+
+function closestNaturalHeight(naturalHeights, height) {
+  return naturalHeights.map(function (naturalHeight) {
+    return parseInt(naturalHeight, 10);
+  }).reduce(function (acc, naturalHeight) {
+    return naturalHeight <= height ? naturalHeight : acc;
+  }, naturalHeights[0]);
+}
+
+var _extends = Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }return target;
+};
+
+function SortAscIcon(props) {
+  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M0 4.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5H.75A.75.75 0 010 4.25zm0 4a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5H.75A.75.75 0 010 8.25zm0 4a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5H.75a.75.75 0 01-.75-.75zm12.927-9.677a.25.25 0 00-.354 0l-3 3A.25.25 0 009.75 6H12v6.75a.75.75 0 001.5 0V6h2.25a.25.25 0 00.177-.427l-3-3z\"></path>" }, "24": { "width": 24, "path": "<path d=\"M18.5 17.25a.75.75 0 01-1.5 0V7.56l-2.22 2.22a.75.75 0 11-1.06-1.06l3.5-3.5a.75.75 0 011.06 0l3.5 3.5a.75.75 0 01-1.06 1.06L18.5 7.56v9.69zm-15.75.25a.75.75 0 010-1.5h9.5a.75.75 0 010 1.5h-9.5zm0-5a.75.75 0 010-1.5h5.5a.75.75 0 010 1.5h-5.5zm0-5a.75.75 0 010-1.5h3.5a.75.75 0 010 1.5h-3.5z\"></path>" } };
+  return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
+}
+
+SortAscIcon.defaultProps = {
+  className: 'octicon octicon-sort-asc',
+  size: 16,
+  verticalAlign: 'text-bottom'
+};
+
+// eslint-disable-next-line import/no-namespace
+
+var COMMON = compose(space, color);
+
+var sx = function sx(props) {
+  return css(props.sx);
+};
+
+/* THIS FILE IS GENERATED. DO NOT EDIT IT. */
+
+var StyledSortAscIcon = styled(SortAscIcon)(COMMON, sx);
+
+export default StyledSortAscIcon;

package/dist/icons/SortDescIcon.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { compose, space, color } from 'styled-system';
+import css from '@styled-system/css';
+import styled from 'styled-components';
+
+var sizeMap = {
+  small: 16,
+  medium: 32,
+  large: 64
+};
+
+function getSvgProps(_ref) {
+  var ariaLabel = _ref['aria-label'],
+      className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
+      size = _ref.size,
+      verticalAlign = _ref.verticalAlign,
+      svgDataByHeight = _ref.svgDataByHeight;
+
+  var height = sizeMap[size] || size;
+  var naturalHeight = closestNaturalHeight(Object.keys(svgDataByHeight), height);
+  var naturalWidth = svgDataByHeight[naturalHeight].width;
+  var width = height * (naturalWidth / naturalHeight);
+  var path = svgDataByHeight[naturalHeight].path;
+
+  return {
+    'aria-hidden': ariaLabel ? 'false' : 'true',
+    'aria-label': ariaLabel,
+    role: 'img',
+    className: className,
+    viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
+    width: width,
+    height: height,
+    fill: fill,
+    style: {
+      display: 'inline-block',
+      userSelect: 'none',
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
+    },
+    dangerouslySetInnerHTML: { __html: path }
+  };
+}
+
+function closestNaturalHeight(naturalHeights, height) {
+  return naturalHeights.map(function (naturalHeight) {
+    return parseInt(naturalHeight, 10);
+  }).reduce(function (acc, naturalHeight) {
+    return naturalHeight <= height ? naturalHeight : acc;
+  }, naturalHeights[0]);
+}
+
+var _extends = Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }return target;
+};
+
+function SortDescIcon(props) {
+  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M0 4.25a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5H.75A.75.75 0 010 4.25zm0 4a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5H.75A.75.75 0 010 8.25zm0 4a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5H.75a.75.75 0 01-.75-.75z\"></path><path d=\"M13.5 10h2.25a.25.25 0 01.177.427l-3 3a.25.25 0 01-.354 0l-3-3A.25.25 0 019.75 10H12V3.75a.75.75 0 011.5 0V10z\"></path>" }, "24": { "width": 24, "path": "<path d=\"M18.5 16.44V6.75a.75.75 0 00-1.5 0v9.69l-2.22-2.22a.75.75 0 10-1.06 1.06l3.5 3.5a.75.75 0 001.06 0l3.5-3.5a.75.75 0 10-1.06-1.06l-2.22 2.22zM2 7.25a.75.75 0 01.75-.75h9.5a.75.75 0 010 1.5h-9.5A.75.75 0 012 7.25zm0 5a.75.75 0 01.75-.75h5.5a.75.75 0 010 1.5h-5.5a.75.75 0 01-.75-.75zm0 5a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75z\"></path>" } };
+  return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
+}
+
+SortDescIcon.defaultProps = {
+  className: 'octicon octicon-sort-desc',
+  size: 16,
+  verticalAlign: 'text-bottom'
+};
+
+// eslint-disable-next-line import/no-namespace
+
+var COMMON = compose(space, color);
+
+var sx = function sx(props) {
+  return css(props.sx);
+};
+
+/* THIS FILE IS GENERATED. DO NOT EDIT IT. */
+
+var StyledSortDescIcon = styled(SortDescIcon)(COMMON, sx);
+
+export default StyledSortDescIcon;

package/dist/icons/SquareFillIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function SquareFillIcon(props) {
 }
 
 SquareFillIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-square-fill',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/SquareIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function SquareIcon(props) {
 }
 
 SquareIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-square',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/SquirrelIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function SquirrelIcon(props) {
 }
 
 SquirrelIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-squirrel',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/StackIcon.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { compose, space, color } from 'styled-system';
+import css from '@styled-system/css';
+import styled from 'styled-components';
+
+var sizeMap = {
+  small: 16,
+  medium: 32,
+  large: 64
+};
+
+function getSvgProps(_ref) {
+  var ariaLabel = _ref['aria-label'],
+      className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
+      size = _ref.size,
+      verticalAlign = _ref.verticalAlign,
+      svgDataByHeight = _ref.svgDataByHeight;
+
+  var height = sizeMap[size] || size;
+  var naturalHeight = closestNaturalHeight(Object.keys(svgDataByHeight), height);
+  var naturalWidth = svgDataByHeight[naturalHeight].width;
+  var width = height * (naturalWidth / naturalHeight);
+  var path = svgDataByHeight[naturalHeight].path;
+
+  return {
+    'aria-hidden': ariaLabel ? 'false' : 'true',
+    'aria-label': ariaLabel,
+    role: 'img',
+    className: className,
+    viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
+    width: width,
+    height: height,
+    fill: fill,
+    style: {
+      display: 'inline-block',
+      userSelect: 'none',
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
+    },
+    dangerouslySetInnerHTML: { __html: path }
+  };
+}
+
+function closestNaturalHeight(naturalHeights, height) {
+  return naturalHeights.map(function (naturalHeight) {
+    return parseInt(naturalHeight, 10);
+  }).reduce(function (acc, naturalHeight) {
+    return naturalHeight <= height ? naturalHeight : acc;
+  }, naturalHeights[0]);
+}
+
+var _extends = Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }return target;
+};
+
+function StackIcon(props) {
+  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M7.122.392a1.75 1.75 0 011.756 0l5.003 2.902c.83.481.83 1.68 0 2.162L8.878 8.358a1.75 1.75 0 01-1.756 0L2.119 5.456a1.25 1.25 0 010-2.162L7.122.392zM8.125 1.69a.25.25 0 00-.25 0l-4.63 2.685 4.63 2.685a.25.25 0 00.25 0l4.63-2.685-4.63-2.685zM1.601 7.789a.75.75 0 011.025-.273l5.249 3.044a.25.25 0 00.25 0l5.249-3.044a.75.75 0 01.752 1.298l-5.248 3.044a1.75 1.75 0 01-1.756 0L1.874 8.814A.75.75 0 011.6 7.789zm0 3.5a.75.75 0 011.025-.273l5.249 3.044a.25.25 0 00.25 0l5.249-3.044a.75.75 0 01.752 1.298l-5.248 3.044a1.75 1.75 0 01-1.756 0l-5.248-3.044a.75.75 0 01-.273-1.025z\"></path>" }, "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M11.063 1.456a1.75 1.75 0 011.874 0l8.383 5.316a1.75 1.75 0 010 2.956l-8.383 5.316a1.75 1.75 0 01-1.874 0L2.68 9.728a1.75 1.75 0 010-2.956l8.383-5.316zm1.071 1.267a.25.25 0 00-.268 0L3.483 8.039a.25.25 0 000 .422l8.383 5.316a.25.25 0 00.268 0l8.383-5.316a.25.25 0 000-.422l-8.383-5.316z\"></path><path fill-rule=\"evenodd\" d=\"M1.867 12.324a.75.75 0 011.035-.232l8.964 5.685a.25.25 0 00.268 0l8.964-5.685a.75.75 0 01.804 1.267l-8.965 5.685a1.75 1.75 0 01-1.874 0l-8.965-5.685a.75.75 0 01-.231-1.035z\"></path><path fill-rule=\"evenodd\" d=\"M1.867 16.324a.75.75 0 011.035-.232l8.964 5.685a.25.25 0 00.268 0l8.964-5.685a.75.75 0 01.804 1.267l-8.965 5.685a1.75 1.75 0 01-1.874 0l-8.965-5.685a.75.75 0 01-.231-1.035z\"></path>" } };
+  return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
+}
+
+StackIcon.defaultProps = {
+  className: 'octicon octicon-stack',
+  size: 16,
+  verticalAlign: 'text-bottom'
+};
+
+// eslint-disable-next-line import/no-namespace
+
+var COMMON = compose(space, color);
+
+var sx = function sx(props) {
+  return css(props.sx);
+};
+
+/* THIS FILE IS GENERATED. DO NOT EDIT IT. */
+
+var StyledStackIcon = styled(StackIcon)(COMMON, sx);
+
+export default StyledStackIcon;

package/dist/icons/StarFillIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function StarFillIcon(props) {
 }
 
 StarFillIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-star-fill',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/StarIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function StarIcon(props) {
 }
 
 StarIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-star',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/StopIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function StopIcon(props) {
 }
 
 StopIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-stop',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/StopwatchIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function StopwatchIcon(props) {
 }
 
 StopwatchIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-stopwatch',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/StrikethroughIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function StrikethroughIcon(props) {
 }
 
 StrikethroughIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-strikethrough',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/SunIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function SunIcon(props) {
 }
 
 SunIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-sun',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/SyncIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function SyncIcon(props) {
 }
 
 SyncIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-sync',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/TabIcon.js

@@ -12,6 +12,8 @@ var sizeMap = {
 function getSvgProps(_ref) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
       size = _ref.size,
       verticalAlign = _ref.verticalAlign,
       svgDataByHeight = _ref.svgDataByHeight;
@@ -30,11 +32,12 @@ function getSvgProps(_ref) {
     viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
     width: width,
     height: height,
-    fill: 'currentColor',
+    fill: fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      overflow: 'visible'
     },
     dangerouslySetInnerHTML: { __html: path }
   };
@@ -64,7 +67,7 @@ function TabIcon(props) {
 }
 
 TabIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-tab',
   size: 16,
   verticalAlign: 'text-bottom'
 };