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

package/dist/icons/BookIcon.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 BookIcon(props) {
 }
 
 BookIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-book',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/BookmarkFillIcon.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 BookmarkFillIcon(props) {
 }
 
 BookmarkFillIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-bookmark-fill',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/BookmarkIcon.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 BookmarkIcon(props) {
 }
 
 BookmarkIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-bookmark',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/BookmarkSlashFillIcon.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 BookmarkSlashFillIcon(props) {
 }
 
 BookmarkSlashFillIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-bookmark-slash-fill',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/BookmarkSlashIcon.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 BookmarkSlashIcon(props) {
 }
 
 BookmarkSlashIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-bookmark-slash',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/BriefcaseIcon.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 BriefcaseIcon(props) {
 }
 
 BriefcaseIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-briefcase',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/BroadcastIcon.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 BroadcastIcon(props) {
 }
 
 BroadcastIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-broadcast',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/BrowserIcon.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 }
   };
@@ -59,12 +62,12 @@ var _extends = Object.assign || function (target) {
 };
 
 function BrowserIcon(props) {
-  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M6 3h1v1H6V3zM4 3h1v1H4V3zM2 3h1v1H2V3zm12 10H2V5h12v8zm0-9H8V3h6v1zm1-1c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V3z\"></path>" } };
+  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25V4.5h2v-2H1.75zM5 2.5v2h2v-2H5zm3.5 0v2h6V2.75a.25.25 0 00-.25-.25H8.5zm6 3.5h-13v7.25c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V6z\"></path>" }, "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M0 3.75C0 2.784.784 2 1.75 2h20.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0122.25 22H1.75A1.75 1.75 0 010 20.25V3.75zm1.75-.25a.25.25 0 00-.25.25V5.5h4v-2H1.75zM7 3.5v2h4v-2H7zm5.5 0v2h10V3.75a.25.25 0 00-.25-.25H12.5zm10 3.5h-21v13.25c0 .138.112.25.25.25h20.5a.25.25 0 00.25-.25V7z\"></path>" } };
   return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
 }
 
 BrowserIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-browser',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/BugIcon.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 }
   };
@@ -59,12 +62,12 @@ var _extends = Object.assign || function (target) {
 };
 
 function BugIcon(props) {
-  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M11 10h3V9h-3V8l3.17-1.03-.34-.94L11 7V6c0-.55-.45-1-1-1V4c0-.48-.36-.88-.83-.97L10.2 2H12V1H9.8l-2 2h-.59L5.2 1H3v1h1.8l1.03 1.03C5.36 3.12 5 3.51 5 4v1c-.55 0-1 .45-1 1v1l-2.83-.97-.34.94L4 8v1H1v1h3v1L.83 12.03l.34.94L4 12v1c0 .55.45 1 1 1h1l1-1V6h1v7l1 1h1c.55 0 1-.45 1-1v-1l2.83.97.34-.94L11 11v-1zM9 5H6V4h3v1z\"></path>" } };
+  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M4.72.22a.75.75 0 011.06 0l1 .999a3.492 3.492 0 012.441 0l.999-1a.75.75 0 111.06 1.061l-.775.776c.616.63.995 1.493.995 2.444v.327c0 .1-.009.197-.025.292.408.14.764.392 1.029.722l1.968-.787a.75.75 0 01.556 1.392L13 7.258V9h2.25a.75.75 0 010 1.5H13v.5c0 .409-.049.806-.141 1.186l2.17.868a.75.75 0 01-.557 1.392l-2.184-.873A4.997 4.997 0 018 16a4.997 4.997 0 01-4.288-2.427l-2.183.873a.75.75 0 01-.558-1.392l2.17-.868A5.013 5.013 0 013 11v-.5H.75a.75.75 0 010-1.5H3V7.258L.971 6.446a.75.75 0 01.558-1.392l1.967.787c.265-.33.62-.583 1.03-.722a1.684 1.684 0 01-.026-.292V4.5c0-.951.38-1.814.995-2.444L4.72 1.28a.75.75 0 010-1.06zM6.173 5h3.654A.173.173 0 0010 4.827V4.5a2 2 0 10-4 0v.327c0 .096.077.173.173.173zM5.25 6.5a.75.75 0 00-.75.75V11a3.5 3.5 0 107 0V7.25a.75.75 0 00-.75-.75h-5.5z\"></path>" }, "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M7.72.22a.75.75 0 011.06 0l1.204 1.203A4.983 4.983 0 0112 1c.717 0 1.4.151 2.016.423L15.22.22a.75.75 0 011.06 1.06l-.971.972A4.988 4.988 0 0117 6v1.104a2.755 2.755 0 011.917 1.974l1.998-.999a.75.75 0 01.67 1.342L19 10.714V13.5l3.25.003a.75.75 0 110 1.5L19 15.001V16a7.02 7.02 0 01-.204 1.686.833.833 0 01.04.018l2.75 1.375a.75.75 0 11-.671 1.342l-2.638-1.319A7 7 0 0112 23a7 7 0 01-6.197-3.742l-2.758 1.181a.75.75 0 11-.59-1.378l2.795-1.199A7.007 7.007 0 015 16v-.996H1.75a.75.75 0 010-1.5H5v-2.79L2.415 9.42a.75.75 0 01.67-1.342l1.998.999A2.755 2.755 0 017 7.104V6a4.99 4.99 0 011.69-3.748l-.97-.972a.75.75 0 010-1.06zM8.5 7h7V6a3.5 3.5 0 10-7 0v1zm-2 3.266V9.75c0-.69.56-1.25 1.25-1.25h8.5c.69 0 1.25.56 1.25 1.25V16a5.5 5.5 0 01-11 0v-5.734z\"></path>" } };
   return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
 }
 
 BugIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-bug',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/CalendarIcon.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 CalendarIcon(props) {
 }
 
 CalendarIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-calendar',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/CheckCircleFillIcon.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 CheckCircleFillIcon(props) {
 }
 
 CheckCircleFillIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-check-circle-fill',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/CheckCircleIcon.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 CheckCircleIcon(props) {
 }
 
 CheckCircleIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-check-circle',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/CheckIcon.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 CheckIcon(props) {
 }
 
 CheckIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-check',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/ChecklistIcon.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 ChecklistIcon(props) {
 }
 
 ChecklistIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-checklist',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/ChevronDownIcon.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 ChevronDownIcon(props) {
 }
 
 ChevronDownIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-chevron-down',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/ChevronLeftIcon.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 ChevronLeftIcon(props) {
 }
 
 ChevronLeftIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-chevron-left',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/ChevronRightIcon.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 ChevronRightIcon(props) {
 }
 
 ChevronRightIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-chevron-right',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/ChevronUpIcon.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 ChevronUpIcon(props) {
 }
 
 ChevronUpIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-chevron-up',
   size: 16,
   verticalAlign: 'text-bottom'
 };

package/dist/icons/CircleIcon.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 }
   };
@@ -59,12 +62,12 @@ var _extends = Object.assign || function (target) {
 };
 
 function CircleIcon(props) {
-  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M3.404 3.404a6.5 6.5 0 109.192 9.192 6.5 6.5 0 00-9.192-9.192zm-1.06 10.253A8 8 0 1113.656 2.343 8 8 0 012.343 13.657z\"></path>" }, "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M12 2.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19zM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12z\"></path>" } };
+  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z\"></path>" }, "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M12 2.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19zM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12z\"></path>" } };
   return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
 }
 
 CircleIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-circle',
   size: 16,
   verticalAlign: 'text-bottom'
 };