Skip to content

Commit

Permalink
feat: update code with Pull request comments
Browse files Browse the repository at this point in the history
  • Loading branch information
Franck Gaudin committed May 14, 2024
1 parent 9d27f7f commit 73037f3
Show file tree
Hide file tree
Showing 135 changed files with 215 additions and 202 deletions.
15 changes: 15 additions & 0 deletions .changeset/real-lies-remember.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
"@hopper-ui/icons": major
---

Breaking change: Updated the icons variables to be more consistent with the other components.

Will need to update the style sheets to use the new CSS variables.

For example, they will need to replace:

| Old variable | New variable |
| ------------ | ------------ |
| `--hop-richicon-placeholder-surface-color` | `--hop-Richicon-placeholder-shadow` |
| `--hop-richicon-placeholder-icon-color` | `--hop-Richicon-placeholder-background` |
| `--hop-richicon-placeholder-icon-strong-color` | `--hop-Richicon-placeholder-fill` |
4 changes: 1 addition & 3 deletions packages/icons/scripts/generateComponents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import path from "path";

import {
IconSuffix,
PrimaryIconColor,
RichIconSuffix,
WarningWeakIconColor
RichIconSuffix
} from "./constants.ts";
import type { MultiSourceIconSource } from "./fetchSvgs.ts";
import svgoConfig from "./svgo-config.ts";
Expand Down
6 changes: 3 additions & 3 deletions packages/icons/src/generated-rich-icon-components/ActionListRichIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
import { createRichIcon } from "../createRichIcon.tsx";
import { forwardRef, type Ref, type SVGProps } from "react";

const ActionListRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M6.848 4.551a1.2 1.2 0 0 1 .849-.351H17.4a1.2 1.2 0 0 1 1.2 1.2v12.103a1.2 1.2 0 0 1-.352.849l-1.097 1.096a1.2 1.2 0 0 1-.848.352H6.6a1.2 1.2 0 0 1-1.2-1.2V6.497a1.2 1.2 0 0 1 .351-.848z" /><path fill="#fff" fillRule="evenodd" d="M7.8 5.2h9.6c.11 0 .2.09.2.2v12a.2.2 0 0 1-.2.2H7.8a.2.2 0 0 1-.2-.2v-12c0-.11.09-.2.2-.2m5.4 3.1h3v-1h-3zm3 3.6h-3v-1h3zm-3 3.6h3v-1h-3zm-1.427-8.377-1.757 2.19a.5.5 0 0 1-.743.04l-.98-.978L9 7.667l.585.585 1.408-1.755zm-1.757 5.533 1.757-2.19-.78-.626-1.408 1.755L9 11.01l-.707.708.98.979a.5.5 0 0 0 .743-.041m1.757 1.41-1.757 2.19a.5.5 0 0 1-.743.04l-.98-.978L9 14.61l.585.585 1.408-1.755z" /></svg>);
const ActionListRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M9.131 6.069a1.6 1.6 0 0 1 1.132-.469H23.2a1.6 1.6 0 0 1 1.6 1.6v16.137a1.6 1.6 0 0 1-.469 1.132L22.87 25.93a1.6 1.6 0 0 1-1.132.469H8.8a1.6 1.6 0 0 1-1.6-1.6V8.663a1.6 1.6 0 0 1 .469-1.132z" /><path fill="#fff" d="M10.4 6.6h12.8a.6.6 0 0 1 .6.6v16a.6.6 0 0 1-.6.6H10.4a.6.6 0 0 1-.6-.6v-16a.6.6 0 0 1 .6-.6" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M21.6 10.9h-4v-1h4zm0 4.8h-4v-1h4zm0 4.8h-4v-1h4zM15.463 9.523l-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355zm0 4.457-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355zm0 4.8-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355z" /></svg>);
const ActionListRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M11.414 7.586A2 2 0 0 1 12.828 7H29a2 2 0 0 1 2 2v20.172a2 2 0 0 1-.586 1.414l-1.828 1.828a2 2 0 0 1-1.414.586H11a2 2 0 0 1-2-2V10.828a2 2 0 0 1 .586-1.414z" /><path fill="#fff" d="M13 8.25h16a.75.75 0 0 1 .75.75v20a.75.75 0 0 1-.75.75H13a.75.75 0 0 1-.75-.75V9a.75.75 0 0 1 .75-.75" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M27 13.625h-5v-1.25h5zm0 6h-5v-1.25h5zm0 6h-5v-1.25h5zm-7.671-13.721L16.53 15.39a.625.625 0 0 1-.93.051l-1.485-1.484.884-.884.992.991 2.361-2.944zm0 5.571-2.798 3.487a.625.625 0 0 1-.93.052l-1.485-1.485.884-.884.992.992 2.361-2.944zm0 6-2.798 3.487a.625.625 0 0 1-.93.052l-1.485-1.485.884-.884.992.992 2.361-2.944z" /></svg>);
const ActionListRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M6.848 4.551a1.2 1.2 0 0 1 .849-.351H17.4a1.2 1.2 0 0 1 1.2 1.2v12.103a1.2 1.2 0 0 1-.352.849l-1.097 1.096a1.2 1.2 0 0 1-.848.352H6.6a1.2 1.2 0 0 1-1.2-1.2V6.497a1.2 1.2 0 0 1 .351-.848z" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" fillRule="evenodd" d="M7.8 5.2h9.6c.11 0 .2.09.2.2v12a.2.2 0 0 1-.2.2H7.8a.2.2 0 0 1-.2-.2v-12c0-.11.09-.2.2-.2m5.4 3.1h3v-1h-3zm3 3.6h-3v-1h3zm-3 3.6h3v-1h-3zm-1.427-8.377-1.757 2.19a.5.5 0 0 1-.743.04l-.98-.978L9 7.667l.585.585 1.408-1.755zm-1.757 5.533 1.757-2.19-.78-.626-1.408 1.755L9 11.01l-.707.708.98.979a.5.5 0 0 0 .743-.041m1.757 1.41-1.757 2.19a.5.5 0 0 1-.743.04l-.98-.978L9 14.61l.585.585 1.408-1.755z" /></svg>);
const ActionListRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M9.131 6.069a1.6 1.6 0 0 1 1.132-.469H23.2a1.6 1.6 0 0 1 1.6 1.6v16.137a1.6 1.6 0 0 1-.469 1.132L22.87 25.93a1.6 1.6 0 0 1-1.132.469H8.8a1.6 1.6 0 0 1-1.6-1.6V8.663a1.6 1.6 0 0 1 .469-1.132z" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" d="M10.4 6.6h12.8a.6.6 0 0 1 .6.6v16a.6.6 0 0 1-.6.6H10.4a.6.6 0 0 1-.6-.6v-16a.6.6 0 0 1 .6-.6" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M21.6 10.9h-4v-1h4zm0 4.8h-4v-1h4zm0 4.8h-4v-1h4zM15.463 9.523l-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355zm0 4.457-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355zm0 4.8-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355z" /></svg>);
const ActionListRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M11.414 7.586A2 2 0 0 1 12.828 7H29a2 2 0 0 1 2 2v20.172a2 2 0 0 1-.586 1.414l-1.828 1.828a2 2 0 0 1-1.414.586H11a2 2 0 0 1-2-2V10.828a2 2 0 0 1 .586-1.414z" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" d="M13 8.25h16a.75.75 0 0 1 .75.75v20a.75.75 0 0 1-.75.75H13a.75.75 0 0 1-.75-.75V9a.75.75 0 0 1 .75-.75" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M27 13.625h-5v-1.25h5zm0 6h-5v-1.25h5zm0 6h-5v-1.25h5zm-7.671-13.721L16.53 15.39a.625.625 0 0 1-.93.051l-1.485-1.484.884-.884.992.991 2.361-2.944zm0 5.571-2.798 3.487a.625.625 0 0 1-.93.052l-1.485-1.485.884-.884.992.992 2.361-2.944zm0 6-2.798 3.487a.625.625 0 0 1-.93.052l-1.485-1.485.884-.884.992.992 2.361-2.944z" /></svg>);

export const ActionListRichIcon = createRichIcon(ActionListRichIcon24, ActionListRichIcon32, ActionListRichIcon40, "ActionListRichIcon");
6 changes: 3 additions & 3 deletions packages/icons/src/generated-rich-icon-components/AnonymousRichIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
import { createRichIcon } from "../createRichIcon.tsx";
import { forwardRef, type Ref, type SVGProps } from "react";

const AnonymousRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M20.4 11.4c0 2.46-.983 4.417-2.7 6-1.583 1.717-3.84 3-6.3 3a7.8 7.8 0 0 1-7.8-7.8c0-2.46.9-3.9 2.4-5.7 1.77-2.125 4.14-3.3 6.6-3.3a7.8 7.8 0 0 1 7.8 7.8" /><path fill="#fff" fillRule="evenodd" d="M12.6 18.2a6.8 6.8 0 1 0 0-13.6 6.8 6.8 0 0 0 0 13.6m-3-7.361a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4m7.2-1.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0m-7.557 3.248a.5.5 0 0 0-.78.626A5.3 5.3 0 0 0 12.6 15.5a5.3 5.3 0 0 0 4.137-1.987.5.5 0 0 0-.78-.626A4.29 4.29 0 0 1 12.6 14.5a4.3 4.3 0 0 1-3.357-1.613" /></svg>);
const AnonymousRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M27.2 15.2c0 3.28-1.31 5.89-3.6 8-2.11 2.29-5.12 4-8.4 4-5.744 0-10.4-4.656-10.4-10.4 0-3.28 1.2-5.2 3.2-7.6 2.36-2.833 5.52-4.4 8.8-4.4 5.744 0 10.4 4.656 10.4 10.4" /><path fill="#fff" fillRule="evenodd" d="M16.8 24.6a9.4 9.4 0 1 0 0-18.8 9.4 9.4 0 0 0 0 18.8m-4-10.2a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4m9.2-1.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0m-9.806 4.087a.5.5 0 0 0-.78.626A6.89 6.89 0 0 0 16.8 20.5c2.18 0 4.123-1.01 5.386-2.587a.5.5 0 1 0-.78-.626A5.89 5.89 0 0 1 16.8 19.5a5.89 5.89 0 0 1-4.606-2.213" /></svg>);
const AnonymousRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M34 19c0 4.1-1.638 7.362-4.5 10-2.638 2.862-6.4 5-10.5 5-7.18 0-13-5.82-13-13 0-4.1 1.5-6.5 4-9.5C12.951 7.959 16.9 6 21 6c7.18 0 13 5.82 13 13" /><path fill="#fff" fillRule="evenodd" d="M21 30.75c6.49 0 11.75-5.26 11.75-11.75S27.49 7.25 21 7.25 9.25 12.51 9.25 19 14.51 30.75 21 30.75M16 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m11.5-1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-12.258 5.11a.625.625 0 0 0-.975.78A8.61 8.61 0 0 0 21 25.626a8.61 8.61 0 0 0 6.733-3.234.625.625 0 1 0-.975-.782A7.36 7.36 0 0 1 21 24.375a7.36 7.36 0 0 1-5.758-2.766" /></svg>);
const AnonymousRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M20.4 11.4c0 2.46-.983 4.417-2.7 6-1.583 1.717-3.84 3-6.3 3a7.8 7.8 0 0 1-7.8-7.8c0-2.46.9-3.9 2.4-5.7 1.77-2.125 4.14-3.3 6.6-3.3a7.8 7.8 0 0 1 7.8 7.8" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" fillRule="evenodd" d="M12.6 18.2a6.8 6.8 0 1 0 0-13.6 6.8 6.8 0 0 0 0 13.6m-3-7.361a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4m7.2-1.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0m-7.557 3.248a.5.5 0 0 0-.78.626A5.3 5.3 0 0 0 12.6 15.5a5.3 5.3 0 0 0 4.137-1.987.5.5 0 0 0-.78-.626A4.29 4.29 0 0 1 12.6 14.5a4.3 4.3 0 0 1-3.357-1.613" /></svg>);
const AnonymousRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M27.2 15.2c0 3.28-1.31 5.89-3.6 8-2.11 2.29-5.12 4-8.4 4-5.744 0-10.4-4.656-10.4-10.4 0-3.28 1.2-5.2 3.2-7.6 2.36-2.833 5.52-4.4 8.8-4.4 5.744 0 10.4 4.656 10.4 10.4" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" fillRule="evenodd" d="M16.8 24.6a9.4 9.4 0 1 0 0-18.8 9.4 9.4 0 0 0 0 18.8m-4-10.2a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4m9.2-1.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0m-9.806 4.087a.5.5 0 0 0-.78.626A6.89 6.89 0 0 0 16.8 20.5c2.18 0 4.123-1.01 5.386-2.587a.5.5 0 1 0-.78-.626A5.89 5.89 0 0 1 16.8 19.5a5.89 5.89 0 0 1-4.606-2.213" /></svg>);
const AnonymousRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M34 19c0 4.1-1.638 7.362-4.5 10-2.638 2.862-6.4 5-10.5 5-7.18 0-13-5.82-13-13 0-4.1 1.5-6.5 4-9.5C12.951 7.959 16.9 6 21 6c7.18 0 13 5.82 13 13" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" fillRule="evenodd" d="M21 30.75c6.49 0 11.75-5.26 11.75-11.75S27.49 7.25 21 7.25 9.25 12.51 9.25 19 14.51 30.75 21 30.75M16 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m11.5-1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-12.258 5.11a.625.625 0 0 0-.975.78A8.61 8.61 0 0 0 21 25.626a8.61 8.61 0 0 0 6.733-3.234.625.625 0 1 0-.975-.782A7.36 7.36 0 0 1 21 24.375a7.36 7.36 0 0 1-5.758-2.766" /></svg>);

export const AnonymousRichIcon = createRichIcon(AnonymousRichIcon24, AnonymousRichIcon32, AnonymousRichIcon40, "AnonymousRichIcon");
6 changes: 3 additions & 3 deletions packages/icons/src/generated-rich-icon-components/CautionRichIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
import { createRichIcon } from "../createRichIcon.tsx";
import { forwardRef, type Ref, type SVGProps } from "react";

const CautionRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="m20.578 14.333-5.782-10.68c-.482-.89-1.417-1.204-2.294-1.124-1.444.131-2.355.933-3.001 1.92L3.417 15.58c-.758 1.4.255 3.101 1.846 3.101h12.065c.954 0 1.547-.516 2.407-1.274.922-.813 1.454-1.943.843-3.073" /><path fill="#fff" d="M11.806 4.128a1.2 1.2 0 0 1 2.11 0l5.782 10.681a1.2 1.2 0 0 1-1.055 1.772H7.072a1.2 1.2 0 0 1-1.055-1.772z" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M13.357 6.48v5.2h-1v-5.2z" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M14.057 13.88a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0" /></svg>);
const CautionRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M27.088 23a3.2 3.2 0 0 0 .551-3.786L20.07 5.226c-.633-1.121-1.81-1.626-3.267-1.555-1.571.076-2.816 1.238-3.677 2.554l-8.112 14.84c-1.01 1.866.34 4.135 2.462 4.135h16.087a3.2 3.2 0 0 0 2.263-.937z" /><path fill="#fff" d="M25.747 22.342a1.602 1.602 0 0 0 .974-2.304l-7.708-14.24a1.58 1.58 0 0 0-1.41-.839 1.58 1.58 0 0 0-1.404.838L8.48 20.037a1.602 1.602 0 0 0 1.185 2.348q.108.015.222.015h15.427q.229 0 .433-.058" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M18.1 9.1v6.6h-1V9.1z" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M19.2 18.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" /></svg>);
const CautionRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M33.86 28.75a4 4 0 0 0 .689-4.733L25.085 6.533c-.79-1.402-2.262-2.033-4.083-1.945-1.963.096-3.52 1.548-4.596 3.193L6.266 26.332c-1.263 2.332.425 5.168 3.078 5.168h20.109a4 4 0 0 0 2.828-1.172z" /><path fill="#fff" d="M32.183 27.928c1.19-.328 1.85-1.714 1.219-2.88l-9.636-17.8a1.98 1.98 0 0 0-1.762-1.049 1.98 1.98 0 0 0-1.755 1.047L10.6 25.047c-.615 1.135-.007 2.478 1.123 2.852a2 2 0 0 0 .635.101h19.284q.285 0 .54-.072" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M22.625 11.375v8.25h-1.25v-8.25z" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M24 23.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0" /></svg>);
const CautionRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="m20.578 14.333-5.782-10.68c-.482-.89-1.417-1.204-2.294-1.124-1.444.131-2.355.933-3.001 1.92L3.417 15.58c-.758 1.4.255 3.101 1.846 3.101h12.065c.954 0 1.547-.516 2.407-1.274.922-.813 1.454-1.943.843-3.073" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" d="M11.806 4.128a1.2 1.2 0 0 1 2.11 0l5.782 10.681a1.2 1.2 0 0 1-1.055 1.772H7.072a1.2 1.2 0 0 1-1.055-1.772z" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M13.357 6.48v5.2h-1v-5.2z" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M14.057 13.88a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0" /></svg>);
const CautionRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M27.088 23a3.2 3.2 0 0 0 .551-3.786L20.07 5.226c-.633-1.121-1.81-1.626-3.267-1.555-1.571.076-2.816 1.238-3.677 2.554l-8.112 14.84c-1.01 1.866.34 4.135 2.462 4.135h16.087a3.2 3.2 0 0 0 2.263-.937z" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" d="M25.747 22.342a1.602 1.602 0 0 0 .974-2.304l-7.708-14.24a1.58 1.58 0 0 0-1.41-.839 1.58 1.58 0 0 0-1.404.838L8.48 20.037a1.602 1.602 0 0 0 1.185 2.348q.108.015.222.015h15.427q.229 0 .433-.058" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M18.1 9.1v6.6h-1V9.1z" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M19.2 18.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" /></svg>);
const CautionRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M33.86 28.75a4 4 0 0 0 .689-4.733L25.085 6.533c-.79-1.402-2.262-2.033-4.083-1.945-1.963.096-3.52 1.548-4.596 3.193L6.266 26.332c-1.263 2.332.425 5.168 3.078 5.168h20.109a4 4 0 0 0 2.828-1.172z" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" d="M32.183 27.928c1.19-.328 1.85-1.714 1.219-2.88l-9.636-17.8a1.98 1.98 0 0 0-1.762-1.049 1.98 1.98 0 0 0-1.755 1.047L10.6 25.047c-.615 1.135-.007 2.478 1.123 2.852a2 2 0 0 0 .635.101h19.284q.285 0 .54-.072" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M22.625 11.375v8.25h-1.25v-8.25z" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M24 23.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0" /></svg>);

export const CautionRichIcon = createRichIcon(CautionRichIcon24, CautionRichIcon32, CautionRichIcon40, "CautionRichIcon");
Loading

0 comments on commit 73037f3

Please sign in to comment.