@primer/styled-octicons 17.4.1 → 17.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,87 @@
1
+ import React from 'react';
2
+ import { compose, space, color } from 'styled-system';
3
+ import css from '@styled-system/css';
4
+ import styled from 'styled-components';
5
+
6
+ var sizeMap = {
7
+ small: 16,
8
+ medium: 32,
9
+ large: 64
10
+ };
11
+
12
+ function getSvgProps(_ref) {
13
+ var ariaLabel = _ref['aria-label'],
14
+ className = _ref.className,
15
+ _ref$fill = _ref.fill,
16
+ fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
17
+ size = _ref.size,
18
+ verticalAlign = _ref.verticalAlign,
19
+ svgDataByHeight = _ref.svgDataByHeight;
20
+
21
+ var height = sizeMap[size] || size;
22
+ var naturalHeight = closestNaturalHeight(Object.keys(svgDataByHeight), height);
23
+ var naturalWidth = svgDataByHeight[naturalHeight].width;
24
+ var width = height * (naturalWidth / naturalHeight);
25
+ var path = svgDataByHeight[naturalHeight].path;
26
+
27
+ return {
28
+ 'aria-hidden': ariaLabel ? 'false' : 'true',
29
+ 'aria-label': ariaLabel,
30
+ role: 'img',
31
+ className: className,
32
+ viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
33
+ width: width,
34
+ height: height,
35
+ fill: fill,
36
+ style: {
37
+ display: 'inline-block',
38
+ userSelect: 'none',
39
+ verticalAlign: verticalAlign,
40
+ overflow: 'visible'
41
+ },
42
+ dangerouslySetInnerHTML: { __html: path }
43
+ };
44
+ }
45
+
46
+ function closestNaturalHeight(naturalHeights, height) {
47
+ return naturalHeights.map(function (naturalHeight) {
48
+ return parseInt(naturalHeight, 10);
49
+ }).reduce(function (acc, naturalHeight) {
50
+ return naturalHeight <= height ? naturalHeight : acc;
51
+ }, naturalHeights[0]);
52
+ }
53
+
54
+ var _extends = Object.assign || function (target) {
55
+ for (var i = 1; i < arguments.length; i++) {
56
+ var source = arguments[i];for (var key in source) {
57
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
58
+ target[key] = source[key];
59
+ }
60
+ }
61
+ }return target;
62
+ };
63
+
64
+ function AccessibilityInsetIcon(props) {
65
+ var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M8 0a8 8 0 100 16A8 8 0 008 0zm2 4a2 2 0 01-1.05 1.76c.115.069.222.15.32.24h2.98a.75.75 0 010 1.5H9.888l.608 5.67a.75.75 0 11-1.492.16L8.754 11H7.246l-.25 2.33a.75.75 0 11-1.49-.16l.607-5.67H3.75a.75.75 0 010-1.5h2.98a1.87 1.87 0 01.32-.24A2 2 0 1110 4z\"></path>" } };
66
+ return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
67
+ }
68
+
69
+ AccessibilityInsetIcon.defaultProps = {
70
+ className: 'octicon octicon-accessibility-inset',
71
+ size: 16,
72
+ verticalAlign: 'text-bottom'
73
+ };
74
+
75
+ // eslint-disable-next-line import/no-namespace
76
+
77
+ var COMMON = compose(space, color);
78
+
79
+ var sx = function sx(props) {
80
+ return css(props.sx);
81
+ };
82
+
83
+ /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
84
+
85
+ var StyledAccessibilityInsetIcon = styled(AccessibilityInsetIcon)(COMMON, sx);
86
+
87
+ export default StyledAccessibilityInsetIcon;
@@ -0,0 +1,87 @@
1
+ import React from 'react';
2
+ import { compose, space, color } from 'styled-system';
3
+ import css from '@styled-system/css';
4
+ import styled from 'styled-components';
5
+
6
+ var sizeMap = {
7
+ small: 16,
8
+ medium: 32,
9
+ large: 64
10
+ };
11
+
12
+ function getSvgProps(_ref) {
13
+ var ariaLabel = _ref['aria-label'],
14
+ className = _ref.className,
15
+ _ref$fill = _ref.fill,
16
+ fill = _ref$fill === undefined ? 'currentColor' : _ref$fill,
17
+ size = _ref.size,
18
+ verticalAlign = _ref.verticalAlign,
19
+ svgDataByHeight = _ref.svgDataByHeight;
20
+
21
+ var height = sizeMap[size] || size;
22
+ var naturalHeight = closestNaturalHeight(Object.keys(svgDataByHeight), height);
23
+ var naturalWidth = svgDataByHeight[naturalHeight].width;
24
+ var width = height * (naturalWidth / naturalHeight);
25
+ var path = svgDataByHeight[naturalHeight].path;
26
+
27
+ return {
28
+ 'aria-hidden': ariaLabel ? 'false' : 'true',
29
+ 'aria-label': ariaLabel,
30
+ role: 'img',
31
+ className: className,
32
+ viewBox: '0 0 ' + naturalWidth + ' ' + naturalHeight,
33
+ width: width,
34
+ height: height,
35
+ fill: fill,
36
+ style: {
37
+ display: 'inline-block',
38
+ userSelect: 'none',
39
+ verticalAlign: verticalAlign,
40
+ overflow: 'visible'
41
+ },
42
+ dangerouslySetInnerHTML: { __html: path }
43
+ };
44
+ }
45
+
46
+ function closestNaturalHeight(naturalHeights, height) {
47
+ return naturalHeights.map(function (naturalHeight) {
48
+ return parseInt(naturalHeight, 10);
49
+ }).reduce(function (acc, naturalHeight) {
50
+ return naturalHeight <= height ? naturalHeight : acc;
51
+ }, naturalHeights[0]);
52
+ }
53
+
54
+ var _extends = Object.assign || function (target) {
55
+ for (var i = 1; i < arguments.length; i++) {
56
+ var source = arguments[i];for (var key in source) {
57
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
58
+ target[key] = source[key];
59
+ }
60
+ }
61
+ }return target;
62
+ };
63
+
64
+ function ShieldSlashIcon(props) {
65
+ var svgDataByHeight = { "16": { "width": 16, "path": "<path d=\"M8.533.133a1.75 1.75 0 00-1.066 0l-2.091.67a.75.75 0 00.457 1.428l2.09-.67a.25.25 0 01.153 0l5.25 1.68a.25.25 0 01.174.239V7c0 .233-.008.464-.025.694a.75.75 0 101.495.112c.02-.27.03-.538.03-.806V3.48a1.75 1.75 0 00-1.217-1.667L8.533.133z\"></path><path fill-rule=\"evenodd\" d=\"M1 2.857l-.69-.5a.75.75 0 11.88-1.214l14.5 10.5a.75.75 0 11-.88 1.214l-1.282-.928c-.995 1.397-2.553 2.624-4.864 3.608-.425.181-.905.18-1.329 0-2.447-1.042-4.049-2.356-5.032-3.855C1.32 10.182 1 8.566 1 7V2.857zm1.5 1.086V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297.05.02.106.02.153 0 2.127-.905 3.439-1.982 4.237-3.108L2.5 3.943z\"></path>" } };
66
+ return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
67
+ }
68
+
69
+ ShieldSlashIcon.defaultProps = {
70
+ className: 'octicon octicon-shield-slash',
71
+ size: 16,
72
+ verticalAlign: 'text-bottom'
73
+ };
74
+
75
+ // eslint-disable-next-line import/no-namespace
76
+
77
+ var COMMON = compose(space, color);
78
+
79
+ var sx = function sx(props) {
80
+ return css(props.sx);
81
+ };
82
+
83
+ /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
84
+
85
+ var StyledShieldSlashIcon = styled(ShieldSlashIcon)(COMMON, sx);
86
+
87
+ export default StyledShieldSlashIcon;
package/dist/index.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface IconProps extends StyledSystem.ColorProps, StyledSystem.SpacePr
15
15
 
16
16
  export type Icon = React.FC<IconProps>
17
17
  export const AccessibilityIcon: Icon;
18
+ export const AccessibilityInsetIcon: Icon;
18
19
  export const AlertIcon: Icon;
19
20
  export const AlertFillIcon: Icon;
20
21
  export const AppsIcon: Icon;
@@ -242,6 +243,7 @@ export const ShareAndroidIcon: Icon;
242
243
  export const ShieldIcon: Icon;
243
244
  export const ShieldCheckIcon: Icon;
244
245
  export const ShieldLockIcon: Icon;
246
+ export const ShieldSlashIcon: Icon;
245
247
  export const ShieldXIcon: Icon;
246
248
  export const SidebarCollapseIcon: Icon;
247
249
  export const SidebarExpandIcon: Icon;
package/dist/index.esm.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { default as AccessibilityIcon } from './icons/AccessibilityIcon';
2
+ export { default as AccessibilityInsetIcon } from './icons/AccessibilityInsetIcon';
2
3
  export { default as AlertIcon } from './icons/AlertIcon';
3
4
  export { default as AlertFillIcon } from './icons/AlertFillIcon';
4
5
  export { default as AppsIcon } from './icons/AppsIcon';
@@ -226,6 +227,7 @@ export { default as ShareAndroidIcon } from './icons/ShareAndroidIcon';
226
227
  export { default as ShieldIcon } from './icons/ShieldIcon';
227
228
  export { default as ShieldCheckIcon } from './icons/ShieldCheckIcon';
228
229
  export { default as ShieldLockIcon } from './icons/ShieldLockIcon';
230
+ export { default as ShieldSlashIcon } from './icons/ShieldSlashIcon';
229
231
  export { default as ShieldXIcon } from './icons/ShieldXIcon';
230
232
  export { default as SidebarCollapseIcon } from './icons/SidebarCollapseIcon';
231
233
  export { default as SidebarExpandIcon } from './icons/SidebarExpandIcon';
package/dist/index.umd.js CHANGED
@@ -77,6 +77,17 @@
77
77
  verticalAlign: 'text-bottom'
78
78
  };
79
79
 
80
+ function AccessibilityInsetIcon(props) {
81
+ var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M8 0a8 8 0 100 16A8 8 0 008 0zm2 4a2 2 0 01-1.05 1.76c.115.069.222.15.32.24h2.98a.75.75 0 010 1.5H9.888l.608 5.67a.75.75 0 11-1.492.16L8.754 11H7.246l-.25 2.33a.75.75 0 11-1.49-.16l.607-5.67H3.75a.75.75 0 010-1.5h2.98a1.87 1.87 0 01.32-.24A2 2 0 1110 4z\"></path>" } };
82
+ return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
83
+ }
84
+
85
+ AccessibilityInsetIcon.defaultProps = {
86
+ className: 'octicon octicon-accessibility-inset',
87
+ size: 16,
88
+ verticalAlign: 'text-bottom'
89
+ };
90
+
80
91
  function AlertIcon(props) {
81
92
  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z\"></path>" }, "24": { "width": 24, "path": "<path d=\"M13 17.5a1 1 0 11-2 0 1 1 0 012 0zm-.25-8.25a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z\"></path><path fill-rule=\"evenodd\" d=\"M9.836 3.244c.963-1.665 3.365-1.665 4.328 0l8.967 15.504c.963 1.667-.24 3.752-2.165 3.752H3.034c-1.926 0-3.128-2.085-2.165-3.752L9.836 3.244zm3.03.751a1 1 0 00-1.732 0L2.168 19.499A1 1 0 003.034 21h17.932a1 1 0 00.866-1.5L12.866 3.994z\"></path>" } };
82
93
  return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
@@ -2574,6 +2585,17 @@
2574
2585
  verticalAlign: 'text-bottom'
2575
2586
  };
2576
2587
 
2588
+ function ShieldSlashIcon(props) {
2589
+ var svgDataByHeight = { "16": { "width": 16, "path": "<path d=\"M8.533.133a1.75 1.75 0 00-1.066 0l-2.091.67a.75.75 0 00.457 1.428l2.09-.67a.25.25 0 01.153 0l5.25 1.68a.25.25 0 01.174.239V7c0 .233-.008.464-.025.694a.75.75 0 101.495.112c.02-.27.03-.538.03-.806V3.48a1.75 1.75 0 00-1.217-1.667L8.533.133z\"></path><path fill-rule=\"evenodd\" d=\"M1 2.857l-.69-.5a.75.75 0 11.88-1.214l14.5 10.5a.75.75 0 11-.88 1.214l-1.282-.928c-.995 1.397-2.553 2.624-4.864 3.608-.425.181-.905.18-1.329 0-2.447-1.042-4.049-2.356-5.032-3.855C1.32 10.182 1 8.566 1 7V2.857zm1.5 1.086V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297.05.02.106.02.153 0 2.127-.905 3.439-1.982 4.237-3.108L2.5 3.943z\"></path>" } };
2590
+ return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
2591
+ }
2592
+
2593
+ ShieldSlashIcon.defaultProps = {
2594
+ className: 'octicon octicon-shield-slash',
2595
+ size: 16,
2596
+ verticalAlign: 'text-bottom'
2597
+ };
2598
+
2577
2599
  function ShieldXIcon(props) {
2578
2600
  var svgDataByHeight = { "16": { "width": 16, "path": "<path fill-rule=\"evenodd\" d=\"M8.533.133a1.75 1.75 0 00-1.066 0l-5.25 1.68A1.75 1.75 0 001 3.48V7c0 1.566.32 3.182 1.303 4.682.983 1.498 2.585 2.813 5.032 3.855a1.7 1.7 0 001.33 0c2.447-1.042 4.049-2.357 5.032-3.855C14.68 10.182 15 8.566 15 7V3.48a1.75 1.75 0 00-1.217-1.667L8.533.133zm-.61 1.429a.25.25 0 01.153 0l5.25 1.68a.25.25 0 01.174.238V7c0 1.358-.275 2.666-1.057 3.86-.784 1.194-2.121 2.34-4.366 3.297a.2.2 0 01-.154 0c-2.245-.956-3.582-2.104-4.366-3.298C2.775 9.666 2.5 8.36 2.5 7V3.48a.25.25 0 01.174-.237l5.25-1.68zM6.78 5.22a.75.75 0 10-1.06 1.06L6.94 7.5 5.72 8.72a.75.75 0 001.06 1.06L8 8.56l1.22 1.22a.75.75 0 101.06-1.06L9.06 7.5l1.22-1.22a.75.75 0 10-1.06-1.06L8 6.44 6.78 5.22z\"></path>" }, "24": { "width": 24, "path": "<path d=\"M9.28 7.72a.75.75 0 00-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 101.06 1.06L12 12.56l2.72 2.72a.75.75 0 101.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 00-1.06-1.06L12 10.44 9.28 7.72z\"></path><path fill-rule=\"evenodd\" d=\"M12.54.637a1.75 1.75 0 00-1.08 0L3.21 3.312A1.75 1.75 0 002 4.976V10c0 6.19 3.77 10.705 9.401 12.83.386.145.812.145 1.198 0C18.229 20.704 22 16.19 22 10V4.976c0-.759-.49-1.43-1.21-1.664L12.54.637zm-.617 1.426a.25.25 0 01.154 0l8.25 2.676a.25.25 0 01.173.237V10c0 5.461-3.28 9.483-8.43 11.426a.2.2 0 01-.14 0C6.78 19.483 3.5 15.46 3.5 10V4.976c0-.108.069-.203.173-.237l8.25-2.676z\"></path>" } };
2579
2601
  return React.createElement('svg', getSvgProps(_extends({}, props, { svgDataByHeight: svgDataByHeight })));
@@ -3193,6 +3215,10 @@
3193
3215
 
3194
3216
  /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
3195
3217
 
3218
+ var StyledAccessibilityInsetIcon = styled(AccessibilityInsetIcon)(COMMON, sx);
3219
+
3220
+ /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
3221
+
3196
3222
  var StyledAlertIcon = styled(AlertIcon)(COMMON, sx);
3197
3223
 
3198
3224
  /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
@@ -4101,6 +4127,10 @@
4101
4127
 
4102
4128
  /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
4103
4129
 
4130
+ var StyledShieldSlashIcon = styled(ShieldSlashIcon)(COMMON, sx);
4131
+
4132
+ /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
4133
+
4104
4134
  var StyledShieldXIcon = styled(ShieldXIcon)(COMMON, sx);
4105
4135
 
4106
4136
  /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
@@ -4320,6 +4350,7 @@
4320
4350
  var StyledZapIcon = styled(ZapIcon)(COMMON, sx);
4321
4351
 
4322
4352
  exports.AccessibilityIcon = StyledAccessibilityIcon;
4353
+ exports.AccessibilityInsetIcon = StyledAccessibilityInsetIcon;
4323
4354
  exports.AlertIcon = StyledAlertIcon;
4324
4355
  exports.AlertFillIcon = StyledAlertFillIcon;
4325
4356
  exports.AppsIcon = StyledAppsIcon;
@@ -4547,6 +4578,7 @@
4547
4578
  exports.ShieldIcon = StyledShieldIcon;
4548
4579
  exports.ShieldCheckIcon = StyledShieldCheckIcon;
4549
4580
  exports.ShieldLockIcon = StyledShieldLockIcon;
4581
+ exports.ShieldSlashIcon = StyledShieldSlashIcon;
4550
4582
  exports.ShieldXIcon = StyledShieldXIcon;
4551
4583
  exports.SidebarCollapseIcon = StyledSidebarCollapseIcon;
4552
4584
  exports.SidebarExpandIcon = StyledSidebarExpandIcon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/styled-octicons",
3
- "version": "17.4.1",
3
+ "version": "17.5.0",
4
4
  "description": "A scalable set of icons handcrafted with <3 by GitHub.",
5
5
  "homepage": "https://primer.style/octicons",
6
6
  "author": "GitHub, Inc.",