@patternfly/react-icons 5.0.0-prerelease.2 → 5.0.0-prerelease.4
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.
- package/CHANGELOG.md +12 -3384
- package/README.md +11 -10
- package/dist/esm/createIcon.d.ts.map +1 -1
- package/dist/esm/createIcon.js +1 -1
- package/dist/esm/createIcon.js.map +1 -1
- package/dist/js/createIcon.d.ts.map +1 -1
- package/dist/js/createIcon.js +1 -1
- package/dist/js/createIcon.js.map +1 -1
- package/package.json +2 -2
- package/src/createIcon.tsx +2 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @patternfly/react-icons
|
|
2
2
|
|
|
3
|
-
PatternFly
|
|
3
|
+
PatternFly Icons as React Components.
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
@@ -10,17 +10,18 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
|
|
|
10
10
|
const closeIcon = <TimesIcon />;
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
For a list of the available icons please refer to the [PatternFly
|
|
13
|
+
For a list of the available icons please refer to the [PatternFly react docs](https://patternfly-react-main.surge.sh/icons/)
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
## Styling icons
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
| ----- | ---------------------------------------------------------------- | -------------- |
|
|
19
|
-
| color | Color of the icon (e.g. red, white, #c3ee) | 'currentColor' |
|
|
20
|
-
| size | Size of the icon. There are 4 different sizes: sm, md, lg and xl | sm |
|
|
21
|
-
| title | Label of the icon | null |
|
|
17
|
+
All icons from @patternfly/react-icons have the HTML class pf-v5-svg applied and CSS styles applied via @patternfly/react-styles.
|
|
22
18
|
|
|
23
|
-
|
|
19
|
+
If not using @patternfly/react-icons in conjunction with @patternfly/react-styles, then the following generic styles will need to be applied to the icons: `height="1em", style="vertical-align: -0.125em;" width="1em"`
|
|
20
|
+
|
|
21
|
+
If using @patternfly/react-icons in conjunction with @patternfly/react-core, icons can be further styled by wrapping an icon from
|
|
22
|
+
@patternfly/react-icons in a PatternFly icon component.
|
|
23
|
+
|
|
24
|
+
## Adding icons
|
|
24
25
|
|
|
25
26
|
Icons for this package are generated from the `@fortawesome/free-solid-svg-icons` package. To add more to what is generated, modify the [icons.js](./build/icons.js) file in the build folder.
|
|
26
27
|
|
|
@@ -34,7 +35,7 @@ module.exports = {
|
|
|
34
35
|
}
|
|
35
36
|
```
|
|
36
37
|
|
|
37
|
-
## Tree
|
|
38
|
+
## Tree shaking
|
|
38
39
|
|
|
39
40
|
Ensure optimization.sideEffects is set to true within your Webpack config:
|
|
40
41
|
```JS
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CA+BrD"}
|
package/dist/esm/createIcon.js
CHANGED
|
@@ -16,7 +16,7 @@ export function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgP
|
|
|
16
16
|
const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
|
|
17
17
|
const hasTitle = Boolean(title);
|
|
18
18
|
const viewBox = [xOffset, yOffset, width, height].join(' ');
|
|
19
|
-
return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
|
|
19
|
+
return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
|
|
20
20
|
hasTitle && React.createElement("title", { id: this.id }, title),
|
|
21
21
|
React.createElement("path", { d: svgPath })));
|
|
22
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAGL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAGL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;YA0BnC,CAAC;YAxBC,MAAM;gBACJ,MAAM,KAAiC,IAAI,CAAC,KAAK,EAA3C,EAAE,KAAK,EAAE,SAAS,OAAyB,EAApB,KAAK,cAA5B,sBAA8B,CAAa,CAAC;gBAClD,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;gBAEnE,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;gBAChC,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAE5D,OAAO,CACL,2CACE,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,cAAc,qBACF,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,iBAC7B,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACnC,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,IACP,KAAiD;oBAErD,QAAQ,IAAI,+BAAO,EAAE,EAAE,IAAI,CAAC,EAAE,IAAG,KAAK,CAAS;oBAChD,8BAAM,CAAC,EAAE,OAAO,GAAI,CAChB,CACP,CAAC;YACJ,CAAC;SACF;QA5BQ,cAAW,GAAG,IAAK;WA4B1B;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CA+BrD"}
|
package/dist/js/createIcon.js
CHANGED
|
@@ -19,7 +19,7 @@ function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath })
|
|
|
19
19
|
const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
|
|
20
20
|
const hasTitle = Boolean(title);
|
|
21
21
|
const viewBox = [xOffset, yOffset, width, height].join(' ');
|
|
22
|
-
return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
|
|
22
|
+
return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
|
|
23
23
|
hasTitle && React.createElement("title", { id: this.id }, title),
|
|
24
24
|
React.createElement("path", { d: svgPath })));
|
|
25
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAgB/B,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,SAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAGL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAgB/B,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,SAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAGL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;YA0BnC,CAAC;YAxBC,MAAM;gBACJ,MAAM,KAAiC,IAAI,CAAC,KAAK,EAA3C,EAAE,KAAK,EAAE,SAAS,OAAyB,EAApB,KAAK,sBAA5B,sBAA8B,CAAa,CAAC;gBAClD,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;gBAEnE,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;gBAChC,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAE5D,OAAO,CACL,2CACE,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,cAAc,qBACF,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,iBAC7B,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACnC,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,IACP,KAAiD;oBAErD,QAAQ,IAAI,+BAAO,EAAE,EAAE,IAAI,CAAC,EAAE,IAAG,KAAK,CAAS;oBAChD,8BAAM,CAAC,EAAE,OAAO,GAAI,CAChB,CACP,CAAC;YACJ,CAAC;SACF;QA5BQ,cAAW,GAAG,IAAK;WA4B1B;AACJ,CAAC;AAtCD,gCAsCC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-icons",
|
|
3
|
-
"version": "5.0.0-prerelease.
|
|
3
|
+
"version": "5.0.0-prerelease.4",
|
|
4
4
|
"description": "PatternFly 4 Icons as React Components",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"react": "^17 || ^18",
|
|
44
44
|
"react-dom": "^17 || ^18"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "719eebba5d65e5bc2c7075a4ff5057276c62f0c0"
|
|
47
47
|
}
|
package/src/createIcon.tsx
CHANGED
|
@@ -47,6 +47,8 @@ export function createIcon({
|
|
|
47
47
|
aria-labelledby={hasTitle ? this.id : null}
|
|
48
48
|
aria-hidden={hasTitle ? null : true}
|
|
49
49
|
role="img"
|
|
50
|
+
width="1em"
|
|
51
|
+
height="1em"
|
|
50
52
|
{...(props as Omit<React.SVGProps<SVGElement>, 'ref'>)} // Lie.
|
|
51
53
|
>
|
|
52
54
|
{hasTitle && <title id={this.id}>{title}</title>}
|