@cloudflare/component-icon 10.0.0 → 11.0.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.
- package/CHANGELOG.md +14 -0
- package/DOCUMENTATION.js +3 -1
- package/README.md +22 -12
- package/dist/Icon.d.ts +4 -3
- package/dist/index.d.ts +5 -0
- package/dist/reactsvgs/AccountAnalyticsLogo.d.ts +3 -0
- package/dist/reactsvgs/Add.d.ts +3 -0
- package/dist/reactsvgs/AddMember.d.ts +3 -0
- package/dist/reactsvgs/ApiSecurity.d.ts +3 -0
- package/dist/reactsvgs/Applications.d.ts +3 -0
- package/dist/reactsvgs/Backward.d.ts +3 -0
- package/dist/reactsvgs/Bolt.d.ts +3 -0
- package/dist/reactsvgs/Byoip.d.ts +3 -0
- package/dist/reactsvgs/Calendar.d.ts +3 -0
- package/dist/reactsvgs/Carbon.d.ts +3 -0
- package/dist/reactsvgs/CaretDoubleLeft.d.ts +3 -0
- package/dist/reactsvgs/CaretDoubleRight.d.ts +3 -0
- package/dist/reactsvgs/CaretDown.d.ts +3 -0
- package/dist/reactsvgs/CaretLeft.d.ts +3 -0
- package/dist/reactsvgs/CaretRight.d.ts +3 -0
- package/dist/reactsvgs/CaretUp.d.ts +3 -0
- package/dist/reactsvgs/Chart.d.ts +3 -0
- package/dist/reactsvgs/Clipboard.d.ts +3 -0
- package/dist/reactsvgs/CloudflareAccess.d.ts +3 -0
- package/dist/reactsvgs/CloudflareMagicWan.d.ts +3 -0
- package/dist/reactsvgs/CloudflareSecurityApplication.d.ts +3 -0
- package/dist/reactsvgs/CloudflareSecurityNetwork.d.ts +3 -0
- package/dist/reactsvgs/CloudflareZeroTrust.d.ts +3 -0
- package/dist/reactsvgs/Copy.d.ts +3 -0
- package/dist/reactsvgs/CreditCard.d.ts +3 -0
- package/dist/reactsvgs/Discord.d.ts +3 -0
- package/dist/reactsvgs/Dlp.d.ts +3 -0
- package/dist/reactsvgs/Documentation.d.ts +3 -0
- package/dist/reactsvgs/Download.d.ts +3 -0
- package/dist/reactsvgs/Drive.d.ts +3 -0
- package/dist/reactsvgs/Edgeworker.d.ts +3 -0
- package/dist/reactsvgs/Edit.d.ts +3 -0
- package/dist/reactsvgs/EmailForwarding.d.ts +3 -0
- package/dist/reactsvgs/ExclamationSign.d.ts +3 -0
- package/dist/reactsvgs/ExternalLink.d.ts +3 -0
- package/dist/reactsvgs/Eye.d.ts +3 -0
- package/dist/reactsvgs/Facebook.d.ts +3 -0
- package/dist/reactsvgs/File.d.ts +3 -0
- package/dist/reactsvgs/Filter.d.ts +3 -0
- package/dist/reactsvgs/FirewallRules.d.ts +3 -0
- package/dist/reactsvgs/Flowchart.d.ts +3 -0
- package/dist/reactsvgs/Folder.d.ts +3 -0
- package/dist/reactsvgs/Forward.d.ts +3 -0
- package/dist/reactsvgs/Gateway.d.ts +3 -0
- package/dist/reactsvgs/Gear.d.ts +3 -0
- package/dist/reactsvgs/GitBranch.d.ts +3 -0
- package/dist/reactsvgs/Github.d.ts +3 -0
- package/dist/reactsvgs/Globe.d.ts +3 -0
- package/dist/reactsvgs/Hamburger.d.ts +3 -0
- package/dist/reactsvgs/Help.d.ts +3 -0
- package/dist/reactsvgs/Image.d.ts +3 -0
- package/dist/reactsvgs/InfoSign.d.ts +3 -0
- package/dist/reactsvgs/InternetBrowser.d.ts +3 -0
- package/dist/reactsvgs/Key.d.ts +3 -0
- package/dist/reactsvgs/Leaf.d.ts +3 -0
- package/dist/reactsvgs/Left.d.ts +3 -0
- package/dist/reactsvgs/Link.d.ts +3 -0
- package/dist/reactsvgs/Linkedin.d.ts +3 -0
- package/dist/reactsvgs/List.d.ts +3 -0
- package/dist/reactsvgs/Lock.d.ts +3 -0
- package/dist/reactsvgs/Logs.d.ts +3 -0
- package/dist/reactsvgs/MagicFirewall.d.ts +3 -0
- package/dist/reactsvgs/MagicTransitLogo.d.ts +3 -0
- package/dist/reactsvgs/Mail.d.ts +3 -0
- package/dist/reactsvgs/Minus.d.ts +3 -0
- package/dist/reactsvgs/More.d.ts +3 -0
- package/dist/reactsvgs/Network.d.ts +3 -0
- package/dist/reactsvgs/NetworkAnalyticsLogo.d.ts +3 -0
- package/dist/reactsvgs/Notifications.d.ts +3 -0
- package/dist/reactsvgs/Ok.d.ts +3 -0
- package/dist/reactsvgs/OkSign.d.ts +3 -0
- package/dist/reactsvgs/OptimizationScale.d.ts +3 -0
- package/dist/reactsvgs/PagesLogo.d.ts +3 -0
- package/dist/reactsvgs/Pause.d.ts +3 -0
- package/dist/reactsvgs/PlatformApps.d.ts +3 -0
- package/dist/reactsvgs/Plus.d.ts +3 -0
- package/dist/reactsvgs/Printer.d.ts +3 -0
- package/dist/reactsvgs/ProductSecurityCenter.d.ts +3 -0
- package/dist/reactsvgs/PubSub.d.ts +3 -0
- package/dist/reactsvgs/Queues.d.ts +3 -0
- package/dist/reactsvgs/R2.d.ts +3 -0
- package/dist/reactsvgs/Refresh.d.ts +3 -0
- package/dist/reactsvgs/RegistrarLogo.d.ts +3 -0
- package/dist/reactsvgs/ReliabilityDns.d.ts +3 -0
- package/dist/reactsvgs/ReliabilityLoadBalancer.d.ts +3 -0
- package/dist/reactsvgs/Remove.d.ts +3 -0
- package/dist/reactsvgs/Reorder.d.ts +3 -0
- package/dist/reactsvgs/ResizeHorizontal.d.ts +3 -0
- package/dist/reactsvgs/Retarget.d.ts +3 -0
- package/dist/reactsvgs/Revert.d.ts +3 -0
- package/dist/reactsvgs/Right.d.ts +3 -0
- package/dist/reactsvgs/Script.d.ts +3 -0
- package/dist/reactsvgs/Search.d.ts +3 -0
- package/dist/reactsvgs/Shield.d.ts +3 -0
- package/dist/reactsvgs/Spectrum.d.ts +3 -0
- package/dist/reactsvgs/Speech.d.ts +3 -0
- package/dist/reactsvgs/Stream.d.ts +3 -0
- package/dist/reactsvgs/Teams.d.ts +3 -0
- package/dist/reactsvgs/Terraform.d.ts +3 -0
- package/dist/reactsvgs/Time.d.ts +3 -0
- package/dist/reactsvgs/Twitter.d.ts +3 -0
- package/dist/reactsvgs/TwoWay.d.ts +3 -0
- package/dist/reactsvgs/UnlockOutline.d.ts +3 -0
- package/dist/reactsvgs/Upload.d.ts +3 -0
- package/dist/reactsvgs/User.d.ts +3 -0
- package/dist/reactsvgs/UserMulti.d.ts +3 -0
- package/dist/reactsvgs/UserOutline.d.ts +3 -0
- package/dist/reactsvgs/Version.d.ts +3 -0
- package/dist/reactsvgs/WaitingRoom.d.ts +3 -0
- package/dist/reactsvgs/Web3.d.ts +3 -0
- package/dist/reactsvgs/WebAnalyticsLogo.d.ts +3 -0
- package/dist/reactsvgs/WorkersBundled.d.ts +3 -0
- package/dist/reactsvgs/WorkersDurableObjects.d.ts +3 -0
- package/dist/reactsvgs/WorkersForPlatforms.d.ts +3 -0
- package/dist/reactsvgs/WorkersKv.d.ts +3 -0
- package/dist/reactsvgs/WorkersUnbound.d.ts +3 -0
- package/dist/reactsvgs/Wrangler.d.ts +3 -0
- package/dist/reactsvgs/Wrench.d.ts +3 -0
- package/dist/reactsvgs/Youtube.d.ts +3 -0
- package/dist/reactsvgs/Zaraz.d.ts +3 -0
- package/dist/reactsvgs/ZerotrustCasbLogo.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/Bitbucket.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/Gitlab.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Angular.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Brunch.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Docusaurus.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Eleventy.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Ember.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Gatsby.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Gitbook.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Gridsome.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Harp.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Hexo.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Hugo.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Jekyll.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/MdBook.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Middleman.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Mkdocs.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Nextjs.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Nuxt.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Pelican.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/React.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/ReactStatic.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Slate.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Svelte.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/UmiJs.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Vue.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/VuePress.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/Zola.d.ts +3 -0
- package/dist/reactsvgs/colored-icons/framework-icon-exports/index.d.ts +30 -0
- package/dist/reactsvgs/colored-icons/index.d.ts +6 -0
- package/dist/reactsvgs/index.d.ts +125 -0
- package/dist/reactsvgs/renamed-icons-64px/CirclePause.d.ts +3 -0
- package/dist/reactsvgs/renamed-icons-64px/CirclePlay.d.ts +3 -0
- package/dist/reactsvgs/renamed-icons-64px/CircleStop.d.ts +3 -0
- package/dist/reactsvgs/renamed-icons-64px/ProductSecurityCenter.d.ts +3 -0
- package/dist/reactsvgs/renamed-icons-64px/index.d.ts +8 -0
- package/es/reactsvgs/Dlp.js +15 -0
- package/es/reactsvgs/Queues.js +13 -19
- package/es/reactsvgs/index.js +2 -6
- package/lib/reactsvgs/{Funnel.js → Dlp.js} +4 -4
- package/lib/reactsvgs/Queues.js +13 -19
- package/lib/reactsvgs/index.js +3 -9
- package/package.json +5 -3
- package/svgr.config.js +1 -24
- package/dist/IconType.d.ts +0 -1
- package/es/IconType.js +0 -1
- package/es/iconTypes.js +0 -1
- package/es/reactsvgs/Funnel.js +0 -15
- package/es/reactsvgs/Subtract.js +0 -14
- package/es/reactsvgs/Turnstile.js +0 -19
- package/index.d.ts +0 -25
- package/lib/IconType.js +0 -5
- package/lib/iconTypes.js +0 -8
- package/lib/reactsvgs/Subtract.js +0 -30
- package/lib/reactsvgs/Turnstile.js +0 -35
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 11.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 54ebdb53f4: Update types to properly export `IconType`, and correctly use the type of `Icon` as inferred from the source, rather than manually defined in `index.d.ts`.
|
|
8
|
+
|
|
9
|
+
This is a breaking change to the type signatures, and consumers of the package will need to make changes. Primarily, the prop `ariaLabel` was previously incorrectly typed as `label`.
|
|
10
|
+
|
|
11
|
+
## 10.1.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- 86ee7b8704: Add DLP icon
|
|
16
|
+
|
|
3
17
|
## 10.0.0
|
|
4
18
|
|
|
5
19
|
### Major Changes
|
package/DOCUMENTATION.js
CHANGED
|
@@ -22,7 +22,9 @@ import { saveSvgAsPng } from 'save-svg-as-png';
|
|
|
22
22
|
import { useClipboard } from 'use-clipboard-copy';
|
|
23
23
|
import reactElementToJSXString from 'react-element-to-jsx-string';
|
|
24
24
|
|
|
25
|
-
import
|
|
25
|
+
import IconComponents from './src/reactsvgs/index';
|
|
26
|
+
|
|
27
|
+
const TYPES = Object.keys(IconComponents);
|
|
26
28
|
|
|
27
29
|
const THEME_COLORS = [
|
|
28
30
|
'red',
|
package/README.md
CHANGED
|
@@ -127,26 +127,36 @@ export default IconComponent;
|
|
|
127
127
|
## Updating Icons
|
|
128
128
|
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.
|
|
129
129
|
|
|
130
|
-
###
|
|
130
|
+
### Repo: product-design
|
|
131
131
|
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.
|
|
132
132
|
|
|
133
|
-
### component-library
|
|
133
|
+
### Repo: component-library
|
|
134
134
|
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.
|
|
135
135
|
|
|
136
|
-
1.
|
|
137
|
-
- This should install the `svgo` dependency which is required in order to clean and compile the SVG's
|
|
138
|
-
- If `svgo` does not install, you can install it globally on your machine with `npm install -g svgo`
|
|
136
|
+
#### 1. Install dependencies
|
|
139
137
|
|
|
140
|
-
|
|
138
|
+
run `yarn install` from the root of your `component-library` folder.
|
|
141
139
|
|
|
142
|
-
|
|
140
|
+
This should install the `svgo` dependency which is required in order to clean and compile the SVGs. If `svgo` does not install, you can install it globally on your machine with the command `npm install -g svgo`
|
|
143
141
|
|
|
144
|
-
|
|
145
|
-
- The list of SVG's will be extracted and converted into React components based on the file names provided. They will be added under `../component-icon/src/reactsvgs/`.
|
|
146
|
-
- Additional files touched may include `iconTypes.js` and `/reactsvgs/index.js`
|
|
142
|
+
#### 2. Create a new branch
|
|
147
143
|
|
|
148
|
-
|
|
144
|
+
Run the `git checkout -b <branchname>` command or create a new branch via the graphical git tool of your choice.
|
|
149
145
|
|
|
150
|
-
|
|
146
|
+
#### 3. Run the update icons script
|
|
147
|
+
|
|
148
|
+
The `product-design` repo will be pulled in using the `svgtoreact.sh` script
|
|
149
|
+
|
|
150
|
+
*** NOTE: The product-design repo should be up to date and located within the same parent folder as component library before running this command ***
|
|
151
|
+
|
|
152
|
+
Run `yarn update-icons` in the root folder of `component-library`
|
|
151
153
|
|
|
154
|
+
The list of SVG's will be extracted and converted into React components based on the file names provided. They will be added under `../component-icon/src/reactsvgs/`.
|
|
152
155
|
|
|
156
|
+
Additional files touched may include `iconTypes.js` and `/reactsvgs/index.js`
|
|
157
|
+
|
|
158
|
+
#### 4. Push up the changes and create a PR to `main`.
|
|
159
|
+
|
|
160
|
+
After review, your new icon will be merged into the repository and be available for use shortly!
|
|
161
|
+
|
|
162
|
+
**Note**: Stratus repository [README](https://bitbucket.cfdata.org/projects/FE/repos/stratus/browse) may also be valuable.
|
package/dist/Icon.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import
|
|
2
|
+
import IconComponents from './reactsvgs';
|
|
3
|
+
export declare type IconType = keyof typeof IconComponents;
|
|
3
4
|
declare const _default: React.ComponentType<{
|
|
4
|
-
type:
|
|
5
|
-
className
|
|
5
|
+
type: "search" | "link" | "right" | "script" | "time" | "filter" | "image" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "dlp" | "account-analytics-logo" | "add-member" | "api-security" | "applications" | "backward" | "bolt" | "byoip" | "calendar" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart" | "clipboard" | "cloudflare-access" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "credit-card" | "discord" | "documentation" | "drive" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network" | "notifications" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "pause" | "platform-apps" | "plus" | "printer" | "product-security-center" | "pub-sub" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "shield" | "spectrum" | "speech" | "stream" | "teams" | "terraform" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "waiting-room" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zerotrust-casb-logo";
|
|
6
|
+
className?: string | undefined;
|
|
6
7
|
ariaLabel?: string | undefined;
|
|
7
8
|
testId?: string | undefined;
|
|
8
9
|
color?: ((string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined]) & string) | undefined;
|
package/dist/index.d.ts
ADDED