@primer/styled-octicons 0.0.0-94d0d86 → 0.0.0-9508393

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 GitHub Inc.
+Copyright (c) 2021 GitHub Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/icons/{FileSymlinkIcon.js → AlertFillIcon.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 }
   };
@@ -58,13 +61,13 @@ var _extends = Object.assign || function (target) {
   }return target;
 };
 
-function FileSymlinkIcon(props) {
-  var svgDataByHeight = { "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M3 3a2 2 0 012-2h9.982a2 2 0 011.414.586l4.018 4.018A2 2 0 0121 7.018V21a2 2 0 01-2 2H4.75a.75.75 0 010-1.5H19a.5.5 0 00.5-.5V8.5h-4a2 2 0 01-2-2v-4H5a.5.5 0 00-.5.5v6.25a.75.75 0 01-1.5 0V3zm12-.5v4a.5.5 0 00.5.5h4a.5.5 0 00-.146-.336l-4.018-4.018A.5.5 0 0015 2.5zm-5.692 12l-2.104-2.236a.75.75 0 111.092-1.028l3.294 3.5a.75.75 0 010 1.028l-3.294 3.5a.75.75 0 11-1.092-1.028L9.308 16H4.09a2.59 2.59 0 00-2.59 2.59v3.16a.75.75 0 01-1.5 0v-3.16a4.09 4.09 0 014.09-4.09h5.218z\"></path>" } };
+function AlertFillIcon(props) {
+  var svgDataByHeight = { "12": { "width": 12, "path": "<path fill-rule=\"evenodd\" d=\"M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 01-1.146 1.954H1.33A1.312 1.312 0 01.183 9.058L4.855.708zM7 7V3H5v4h2zm-1 3a1 1 0 100-2 1 1 0 000 2z\"></path>" } };
   return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
 }
 
-FileSymlinkIcon.defaultProps = {
-  className: 'octicon',
+AlertFillIcon.defaultProps = {
+  className: 'octicon octicon-alert-fill',
   size: 16,
   verticalAlign: 'text-bottom'
 };
@@ -79,6 +82,6 @@ var sx = function sx(props) {
 
 /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
 
-var StyledFileSymlinkIcon = styled(FileSymlinkIcon)(COMMON, sx);
+var StyledAlertFillIcon = styled(AlertFillIcon)(COMMON, sx);
 
-export default StyledFileSymlinkIcon;
+export default StyledAlertFillIcon;

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

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

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

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

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

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

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

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

package/dist/icons/ArrowSwitchIcon.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 ArrowSwitchIcon(props) {
+  var svgDataByHeight = { "16": { "width": 16, "path": "<path d=\"M5.22 14.78a.75.75 0 001.06-1.06L4.56 12h8.69a.75.75 0 000-1.5H4.56l1.72-1.72a.75.75 0 00-1.06-1.06l-3 3a.75.75 0 000 1.06l3 3zm5.56-6.5a.75.75 0 11-1.06-1.06l1.72-1.72H2.75a.75.75 0 010-1.5h8.69L9.72 2.28a.75.75 0 011.06-1.06l3 3a.75.75 0 010 1.06l-3 3z\"></path>" }, "24": { "width": 24, "path": "<path d=\"M7.72 21.78a.75.75 0 001.06-1.06L5.56 17.5h14.69a.75.75 0 000-1.5H5.56l3.22-3.22a.75.75 0 10-1.06-1.06l-4.5 4.5a.75.75 0 000 1.06l4.5 4.5zm8.56-9.5a.75.75 0 11-1.06-1.06L18.44 8H3.75a.75.75 0 010-1.5h14.69l-3.22-3.22a.75.75 0 011.06-1.06l4.5 4.5a.75.75 0 010 1.06l-4.5 4.5z\"></path>" } };
+  return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
+}
+
+ArrowSwitchIcon.defaultProps = {
+  className: 'octicon octicon-arrow-switch',
+  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 StyledArrowSwitchIcon = styled(ArrowSwitchIcon)(COMMON, sx);
+
+export default StyledArrowSwitchIcon;

package/dist/icons/ArrowUpIcon.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 ArrowUpIcon(props) {
-  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M3.47 7.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L9 4.81v7.44a.75.75 0 01-1.5 0V4.81L4.53 7.78a.75.75 0 01-1.06 0z\"></path>" }, "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M6.47 10.78a.75.75 0 010-1.06l5.25-5.25a.75.75 0 011.06 0l5.25 5.25a.75.75 0 11-1.06 1.06L13 6.81v12.44a.75.75 0 01-1.5 0V6.81l-3.97 3.97a.75.75 0 01-1.06 0z\"></path>" } };
+  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M3.47 7.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L9 4.81v7.44a.75.75 0 01-1.5 0V4.81L4.53 7.78a.75.75 0 01-1.06 0z\"></path>" }, "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M18.655 10.405a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06l4.97-4.97v14.44a.75.75 0 001.5 0V5.435l4.97 4.97a.75.75 0 001.06 0z\"></path>" } };
   return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
 }
 
 ArrowUpIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-arrow-up',
   size: 16,
   verticalAlign: 'text-bottom'
 };

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

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

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

package/dist/icons/BellFillIcon.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 BellFillIcon(props) {
-  var svgDataByHeight = { "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M6 8a6 6 0 1112 0v2.917c0 .703.228 1.387.65 1.95L20.7 15.6a1.5 1.5 0 01-1.2 2.4h-15a1.5 1.5 0 01-1.2-2.4l2.05-2.733a3.25 3.25 0 00.65-1.95V8zm6 13.5A3.502 3.502 0 018.645 19h6.71A3.502 3.502 0 0112 21.5z\"></path>" } };
+  var svgDataByHeight = { "16": { "width": 16, "path": "<path d=\"M8 16c.9 0 1.7-.6 1.9-1.5.1-.3-.1-.5-.4-.5h-3c-.3 0-.5.2-.4.5.2.9 1 1.5 1.9 1.5zM3 5c0-2.8 2.2-5 5-5s5 2.2 5 5v3l1.7 2.6c.2.2.3.5.3.8 0 .8-.7 1.5-1.5 1.5h-11c-.8.1-1.5-.6-1.5-1.4 0-.3.1-.6.3-.8L3 8.1V5z\"></path>" }, "24": { "width": 24, "path": "<path fill-rule=\"evenodd\" d=\"M6 8a6 6 0 1112 0v2.917c0 .703.228 1.387.65 1.95L20.7 15.6a1.5 1.5 0 01-1.2 2.4h-15a1.5 1.5 0 01-1.2-2.4l2.05-2.733a3.25 3.25 0 00.65-1.95V8zm6 13.5A3.502 3.502 0 018.645 19h6.71A3.502 3.502 0 0112 21.5z\"></path>" } };
   return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
 }
 
 BellFillIcon.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-bell-fill',
   size: 16,
   verticalAlign: 'text-bottom'
 };

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

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