@cloudflare/component-icon 12.21.0 → 12.21.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 12.21.2
+
+### Patch Changes
+
+- 09aaf5e7fb: Updates component-icon documentation
+
+## 12.21.1
+
+### Patch Changes
+
+- 50387b3d0d: Fix caret-stroke icons not recognized in component-icon
+
 ## 12.21.0
 
 ### Minor Changes

package/README.md

@@ -128,7 +128,7 @@ export default IconComponent;
 If you would like to add new icons to the component library/design system please follow the procedures below to help ensure the icons remain consistent.
 
 ### Repo: product-design
-Follow the link to the `product-design` repository where you will find the original SVG's. Follow the [Icon Guidelines](https://wiki.cfops.it/x/QLcvCQ) for details on how to create, export, and add new icons to [product-design](https://bitbucket.cfdata.org/projects/DESIGN/repos/product-design/browse) and stratus repositories.
+Follow the link to the `product-design` repository where you will find the original SVG's. Follow the [Icon Guidelines](https://wiki.cfops.it/x/QLcvCQ) for details on how to create, export, and add new icons to [product-design](https://gitlab.cfdata.org/cloudflare/design/product-design) and stratus repositories.
 
 ### Repo: component-library
 Once your icon is added to the `product-design` repo under the `/icons/icons-exports/` folder and all instructions are followed it is ready to be converted to our React format in this `component-library` repo. 

package/dist/Icon.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import IconComponents from './reactsvgs';
 export declare type IconType = keyof typeof IconComponents;
 declare const _default: React.ComponentType<{
-    type: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edge-log-delivery" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "router" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo";
+    type: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-down-stroke" | "caret-left" | "caret-left-stroke" | "caret-right" | "caret-right-stroke" | "caret-up" | "caret-up-stroke" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edge-log-delivery" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "router" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo";
     className?: string | undefined;
     ariaLabel?: string | undefined;
     label?: string | boolean | undefined;

package/dist/Icon.stories.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<React.ComponentType<{
-    type: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edge-log-delivery" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "router" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo";
+    type: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-down-stroke" | "caret-left" | "caret-left-stroke" | "caret-right" | "caret-right-stroke" | "caret-up" | "caret-up-stroke" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edge-log-delivery" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "router" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo";
     className?: string | undefined;
     ariaLabel?: string | undefined;
     label?: string | boolean | undefined;

package/dist/reactsvgs/index.d.ts

@@ -21,9 +21,13 @@ declare const _default: {
     'caret-double-left': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     'caret-double-right': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     'caret-down': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    'caret-down-stroke': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     'caret-left': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    'caret-left-stroke': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     'caret-right': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    'caret-right-stroke': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     'caret-up': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    'caret-up-stroke': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     'case-study': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     certificate: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     chart: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;

package/es/reactsvgs/index.js

@@ -179,6 +179,10 @@ import Zaraz from './Zaraz';
 import ZeroTrustRiskScoring from './ZeroTrustRiskScoring';
 import ZerotrustCasbLogo from './ZerotrustCasbLogo';
 import ZerotrustNetworksLogo from './ZerotrustNetworksLogo';
+import CaretUpStroke from './CaretUpStroke';
+import CaretDownStroke from './CaretDownStroke';
+import CaretRightStroke from './CaretRightStroke';
+import CaretLeftStroke from './CaretLeftStroke';
 export default {
   dlp: Dlp,
   timer: Timer,
@@ -201,9 +205,13 @@ export default {
   'caret-double-left': CaretDoubleLeft,
   'caret-double-right': CaretDoubleRight,
   'caret-down': CaretDown,
+  'caret-down-stroke': CaretDownStroke,
   'caret-left': CaretLeft,
+  'caret-left-stroke': CaretLeftStroke,
   'caret-right': CaretRight,
+  'caret-right-stroke': CaretRightStroke,
   'caret-up': CaretUp,
+  'caret-up-stroke': CaretUpStroke,
   'case-study': CaseStudy,
   certificate: Certificate,
   chart: Chart,

package/lib/reactsvgs/index.js

@@ -367,6 +367,14 @@ var _ZerotrustCasbLogo = _interopRequireDefault(require("./ZerotrustCasbLogo"));
 
 var _ZerotrustNetworksLogo = _interopRequireDefault(require("./ZerotrustNetworksLogo"));
 
+var _CaretUpStroke = _interopRequireDefault(require("./CaretUpStroke"));
+
+var _CaretDownStroke = _interopRequireDefault(require("./CaretDownStroke"));
+
+var _CaretRightStroke = _interopRequireDefault(require("./CaretRightStroke"));
+
+var _CaretLeftStroke = _interopRequireDefault(require("./CaretLeftStroke"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -391,9 +399,13 @@ var _default = {
   'caret-double-left': _CaretDoubleLeft.default,
   'caret-double-right': _CaretDoubleRight.default,
   'caret-down': _CaretDown.default,
+  'caret-down-stroke': _CaretDownStroke.default,
   'caret-left': _CaretLeft.default,
+  'caret-left-stroke': _CaretLeftStroke.default,
   'caret-right': _CaretRight.default,
+  'caret-right-stroke': _CaretRightStroke.default,
   'caret-up': _CaretUp.default,
+  'caret-up-stroke': _CaretUpStroke.default,
   'case-study': _CaseStudy.default,
   certificate: _Certificate.default,
   chart: _Chart.default,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-icon",
   "description": "Cloudflare Icon Component",
-  "version": "12.21.0",
+  "version": "12.21.2",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "Frontend Team <frontend@cloudflare.com>",