npm - @rescui/icons - Versions diffs - 1.8.1 → 1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 - Mend

@rescui/icons 1.8.1 → 1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14

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.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -1,7 +1,5 @@
 # Icons
-* [Usage examples](./docs/usage.md)
 ## SVG files
 For source svg, please follow these rules:
@@ -36,3 +34,7 @@ This script cleans up the attributes, merges paths and converts file names to th
 ```svg
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M6 13.75h5v-1.5H6zM3 3v14h14V3zm1.5 1.5h11v11h-11z"/></svg>
 ```
+## LLM
+To get the docs for the LLM, check out [this index](./llm/index.md).

package/lib/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._icon_1tf5os8_4{
+._icon_19upof9_4{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._icon_1tf5os8_4{
+._icon_19upof9_4{
     --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +17,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._icon_1tf5os8_4{
+._icon_19upof9_4{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,30 +25,30 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._icon_1tf5os8_4{
+._icon_19upof9_4{
   fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
   width:var(--rs-icons-width, auto);
   height:var(--rs-icons-height, var(--_rs-icons-height));
 }
-._sizeXS_1tf5os8_14{
+._sizeXS_19upof9_14{
   --_rs-icons-height:16px;
 }
-._sizeS_1tf5os8_18{
+._sizeS_19upof9_18{
   --_rs-icons-height:20px;
 }
-._sizeM_1tf5os8_22{
+._sizeM_19upof9_22{
   --_rs-icons-height:24px;
 }
-._sizeL_1tf5os8_26{
+._sizeL_19upof9_26{
   --_rs-icons-height:28px;
 }
-._light_1tf5os8_30{
+._light_19upof9_30{
   --rs-theme-dark:0;
   --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 }
-._dark_1tf5os8_34{
+._dark_19upof9_34{
   --rs-theme-dark:1;
   --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 }
@@ -60,39 +60,39 @@
     transform:rotate(360deg);
   }
 }
-._allVariants_1tf5os8_48{
+._allVariants_19upof9_48{
   aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
   container:rs-icon / size;
 }
-._variant16_1tf5os8_53,
-._variant20_1tf5os8_54,
-._variant24_1tf5os8_55{
+._variant16_19upof9_53,
+._variant20_19upof9_54,
+._variant24_19upof9_55{
   display:none;
 }
-._variant28_1tf5os8_58{
+._variant28_19upof9_58{
   display:block;
 }
 @container rs-icon (max-height: 24px){
-  ._variant24_1tf5os8_55{
+  ._variant24_19upof9_55{
     display:block;
   }
-  ._variant28_1tf5os8_58{
+  ._variant28_19upof9_58{
     display:none;
   }
 }
 @container rs-icon (max-height: 20px){
-  ._variant20_1tf5os8_54{
+  ._variant20_19upof9_54{
     display:block;
   }
-  ._variant24_1tf5os8_55{
+  ._variant24_19upof9_55{
     display:none;
   }
 }
 @container rs-icon (max-height: 16px){
-  ._variant16_1tf5os8_53{
+  ._variant16_19upof9_53{
     display:block;
   }
-  ._variant20_1tf5os8_54{
+  ._variant20_19upof9_54{
     display:none;
   }
 }

package/lib/index.css.js CHANGED Viewed

@@ -1,15 +1,15 @@
 export default {
-  "icon": "_icon_1tf5os8_4",
-  "sizeXS": "_sizeXS_1tf5os8_14",
-  "sizeS": "_sizeS_1tf5os8_18",
-  "sizeM": "_sizeM_1tf5os8_22",
-  "sizeL": "_sizeL_1tf5os8_26",
-  "light": "_light_1tf5os8_30",
-  "dark": "_dark_1tf5os8_34",
-  "allVariants": "_allVariants_1tf5os8_48",
-  "variant16": "_variant16_1tf5os8_53",
-  "variant20": "_variant20_1tf5os8_54",
-  "variant24": "_variant24_1tf5os8_55",
-  "variant28": "_variant28_1tf5os8_58"
+  "icon": "_icon_19upof9_4",
+  "sizeXS": "_sizeXS_19upof9_14",
+  "sizeS": "_sizeS_19upof9_18",
+  "sizeM": "_sizeM_19upof9_22",
+  "sizeL": "_sizeL_19upof9_26",
+  "light": "_light_19upof9_30",
+  "dark": "_dark_19upof9_34",
+  "allVariants": "_allVariants_19upof9_48",
+  "variant16": "_variant16_19upof9_53",
+  "variant20": "_variant20_19upof9_54",
+  "variant24": "_variant24_19upof9_55",
+  "variant28": "_variant28_19upof9_58"
 };
 //# sourceMappingURL=index.css.js.map

package/lib/index.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.css.js","names":[],"sources":["index.css.js"],"sourcesContent":["export default {\"icon\":\"~~_icon_1tf5os8_4~~\",\"sizeXS\":\"~~_sizeXS_1tf5os8_14~~\",\"sizeS\":\"~~_sizeS_1tf5os8_18~~\",\"sizeM\":\"~~_sizeM_1tf5os8_22~~\",\"sizeL\":\"~~_sizeL_1tf5os8_26~~\",\"light\":\"~~_light_1tf5os8_30~~\",\"dark\":\"~~_dark_1tf5os8_34~~\",\"allVariants\":\"~~_allVariants_1tf5os8_48~~\",\"variant16\":\"~~_variant16_1tf5os8_53~~\",\"variant20\":\"~~_variant20_1tf5os8_54~~\",\"variant24\":\"~~_variant24_1tf5os8_55~~\",\"variant28\":\"~~_variant28_1tf5os8_58~~\"}"],"mappings":"AAAA,eAAe;EAAC,QAAO,iBAAR;EAA0B,UAAS,oBAAnC;EAAwD,SAAQ,mBAAhE;EAAoF,SAAQ,mBAA5F;EAAgH,SAAQ,mBAAxH;EAA4I,SAAQ,mBAApJ;EAAwK,QAAO,kBAA/K;EAAkM,eAAc,yBAAhN;EAA0O,aAAY,uBAAtP;EAA8Q,aAAY,uBAA1R;EAAkT,aAAY,uBAA9T;EAAsV,aAAY;AAAlW,CAAf"}
1	+ {"version":3,"file":"index.css.js","names":[],"sources":["index.css.js"],"sourcesContent":["export default {\"icon\":\"_icon_19upof9_4\",\"sizeXS\":\"_sizeXS_19upof9_14\",\"sizeS\":\"_sizeS_19upof9_18\",\"sizeM\":\"_sizeM_19upof9_22\",\"sizeL\":\"_sizeL_19upof9_26\",\"light\":\"_light_19upof9_30\",\"dark\":\"_dark_19upof9_34\",\"allVariants\":\"_allVariants_19upof9_48\",\"variant16\":\"_variant16_19upof9_53\",\"variant20\":\"_variant20_19upof9_54\",\"variant24\":\"_variant24_19upof9_55\",\"variant28\":\"_variant28_19upof9_58\"}"],"mappings":"AAAA,eAAe;EAAC,QAAO,iBAAR;EAA0B,UAAS,oBAAnC;EAAwD,SAAQ,mBAAhE;EAAoF,SAAQ,mBAA5F;EAAgH,SAAQ,mBAAxH;EAA4I,SAAQ,mBAApJ;EAAwK,QAAO,kBAA/K;EAAkM,eAAc,yBAAhN;EAA0O,aAAY,uBAAtP;EAA8Q,aAAY,uBAA1R;EAAkT,aAAY,uBAA9T;EAAsV,aAAY;AAAlW,CAAf"}

package/llm/components/icons.md ADDED Viewed

@@ -0,0 +1,570 @@
+# Icons
+Icons are visual symbols used to represent products, objects, or actions.
+## Overview
+All Icons list
+- AddCircleIcon
+- AddCircleOutlineIcon
+- AddIcon
+- AddOutlineIcon
+- AddPersonIcon
+- AddPersonOutlineIcon
+- AiIcon
+- AndroidIcon
+- AppleIcon
+- ArrowBottomIcon
+- ArrowBottomLeftIcon
+- ArrowBottomLeftOutlineIcon
+- ArrowBottomOutlineIcon
+- ArrowBottomRightIcon
+- ArrowBottomRightOutlineIcon
+- ArrowLeftIcon
+- ArrowLeftOutlineIcon
+- ArrowRightIcon
+- ArrowRightOutlineIcon
+- ArrowTopIcon
+- ArrowTopLeftIcon
+- ArrowTopLeftOutlineIcon
+- ArrowTopOutlineIcon
+- ArrowTopRightIcon
+- ArrowTopRightOutlineIcon
+- AttachedIcon
+- AttachedOutlineIcon
+- BellCrossedIcon
+- BellCrossedOutlineIcon
+- BellIcon
+- BellOutlineIcon
+- BilibiliIcon
+- BitbucketIcon
+- BlockIcon
+- BlockOutlineIcon
+- BlogIcon
+- BlogOutlineIcon
+- BlueskyIcon
+- BranchIcon
+- BranchOutlineIcon
+- BriefcaseIcon
+- BriefcaseOutlineIcon
+- BugIcon
+- BugOutlineIcon
+- BulletsIcon
+- BulletsOutlineIcon
+- CartIcon
+- CartOutlineIcon
+- CheckAsterixIcon
+- CheckAsterixOutlineIcon
+- CheckDollarIcon
+- CheckDollarOutlineIcon
+- CheckDoubleIcon
+- CheckDoubleOutlineIcon
+- CheckIcon
+- CheckLimetedIcon
+- CheckLimetedOutlineIcon
+- CheckOutlineIcon
+- CheckVsIcon
+- CheckVsOutlineIcon
+- CircleIcon
+- CircleOutlineIcon
+- ClockIcon
+- ClockOutlineIcon
+- CloseIcon
+- CloseOutlineIcon
+- CloudCrossedIcon
+- CloudCrossedOutlineIcon
+- CloudDownloadIcon
+- CloudDownloadOutlineIcon
+- CloudIcon
+- CloudOutlineIcon
+- CloudPublishIcon
+- CloudPublishOutlineIcon
+- CodeClosedIcon
+- CodeClosedOutlineIcon
+- CodeIcon
+- CodeOutlineIcon
+- ColorIcon
+- ColorOutlineIcon
+- CommitIcon
+- CommitOutlineIcon
+- CompanyIcon
+- CompanyOutlineIcon
+- ComputerIcon
+- ComputerOutlineIcon
+- CopyIcon
+- CopyOutlineIcon
+- CouponIcon
+- CouponOutlineIcon
+- CropIcon
+- CropOutlineIcon
+- DateIcon
+- DateOutlineIcon
+- DiscordIcon
+- DiscourseIcon
+- DownIcon
+- DownOutlineIcon
+- DownloadIcon
+- DownloadOutlineIcon
+- EmailIcon
+- EmailOutlineIcon
+- EnterIcon
+- EnterOutlineIcon
+- ErrorIcon
+- ErrorOutlineIcon
+- ExitIcon
+- ExitOutlineIcon
+- ExposedIcon
+- ExternalIcon
+- ExternalOutlineIcon
+- EyeCrossedIcon
+- EyeCrossedOutlineIcon
+- EyeIcon
+- EyeOutlineIcon
+- FacebookIcon
+- FigmaIcon
+- FileExcelIcon
+- FileExcelOutlineIcon
+- FileIcon
+- FileOutlineIcon
+- FilesIcon
+- FilesOutlineIcon
+- FilterIcon
+- FilterOutlineIcon
+- FolderIcon
+- FolderOutlineIcon
+- FrameworkIcon
+- FrameworkOutlineIcon
+- FullScreenExitIcon
+- FullScreenExitOutlineIcon
+- FullScreenIcon
+- FullScreenOutlineIcon
+- GearIcon
+- GearOutlineIcon
+- GitHubIcon
+- GitlabIcon
+- GlobusIcon
+- GlobusOutlineIcon
+- GoogleAppIcon
+- GoogleIcon
+- HamburgerIcon
+- HamburgerOutlineIcon
+- HelpIcon
+- HelpOutlineIcon
+- HintIcon
+- HintOutlineIcon
+- HistoryIcon
+- HistoryOutlineIcon
+- HomeIcon
+- HomeOutlineIcon
+- InfinityIcon
+- InfinityOutlineIcon
+- InfoIcon
+- InfoOutlineIcon
+- InstagramIcon
+- JetBrainsIcon
+- JetBrainsOutlineIcon
+- JuejinIcon
+- JunieIcon
+- KeyHoleIcon
+- KeyHoleOutlineIcon
+- KeyIcon
+- KeyOutlineIcon
+- KotlinIcon
+- KtorIcon
+- LanguageIcon
+- LanguageOutlineIcon
+- LearnIcon
+- LearnOutlineIcon
+- LeftIcon
+- LeftOutlineIcon
+- LightningIcon
+- LightningOutlineIcon
+- LinkCrossedIcon
+- LinkCrossedOutlineIcon
+- LinkIcon
+- LinkOutlineIcon
+- LinkedinIcon
+- LinuxIcon
+- LoadingIcon
+- LoadingOutlineIcon
+- LocationIcon
+- LocationOutlineIcon
+- LockIcon
+- LockOpenedIcon
+- LockOpenedOutlineIcon
+- LockOutlineIcon
+- LoveCrossedIcon
+- LoveCrossedOutlineIcon
+- LoveIcon
+- LoveOutlineIcon
+- MagicIcon
+- MagicOutlineIcon
+- MarginHIcon
+- MarginHOutlineIcon
+- MarginVIcon
+- MarginVOutlineIcon
+- MarkerIcon
+- MastodonIcon
+- MerchandiseIcon
+- MerchandiseOutlineIcon
+- MessageIcon
+- MessageOutlineIcon
+- MicrocontrollerIcon
+- MicrocontrollerOutlineIcon
+- MiniPlayerIcon
+- MiniPlayerOutlineIcon
+- MinusIcon
+- MinusOutlineIcon
+- MobileIcon
+- MobileOutlineIcon
+- MoonIcon
+- MoonOutlineIcon
+- MoreIcon
+- MoreOutlineIcon
+- MuteIcon
+- MuteOutlineIcon
+- OrderIcon
+- OrderOutlineIcon
+- PackageIcon
+- PackageOutlineIcon
+- PaddingHIcon
+- PaddingHOutlineIcon
+- PaddingVIcon
+- PaddingVOutlineIcon
+- PauseIcon
+- PauseOutlineIcon
+- PenIcon
+- PenOutlineIcon
+- PercentIcon
+- PercentOutlineIcon
+- PersonIcon
+- PersonOutlineIcon
+- PlayIcon
+- PlayOutlineIcon
+- PlusIcon
+- PlusOutlineIcon
+- PocketIcon
+- PresentIcon
+- PresentOutlineIcon
+- PrintIcon
+- PrintOutlineIcon
+- ProjectsIcon
+- ProjectsOutlineIcon
+- QuoteIcon
+- QuoteOutlineIcon
+- ReadIcon
+- ReadOutlineIcon
+- RedditIcon
+- RedoIcon
+- RedoOutlineIcon
+- RefreshIcon
+- RefreshOutlineIcon
+- RemovePersonIcon
+- RemovePersonOutlineIcon
+- RenewIcon
+- RenewOutlineIcon
+- RequestIcon
+- RequestOutlineIcon
+- ResellerIcon
+- ResellerOutlineIcon
+- RightIcon
+- RightOutlineIcon
+- RocketIcon
+- RocketOutlineIcon
+- RssFeedIcon
+- SearchIcon
+- SearchOutlineIcon
+- SendIcon
+- SendOutlineIcon
+- ServerIcon
+- ServerOutlineIcon
+- SettingsIcon
+- SettingsOutlineIcon
+- ShareIcon
+- ShareOutlineIcon
+- SidebarIcon
+- SidebarOutlineIcon
+- SlackIcon
+- SmileHappyIcon
+- SmileHappyOutlineIcon
+- SmileNeutralIcon
+- SmileNeutralOutlineIcon
+- SmileSadIcon
+- SmileSadOutlineIcon
+- SolarisIcon
+- SpaceIcon
+- SpringIcon
+- StackOverflowIcon
+- StampCrossedIcon
+- StampCrossedOutlineIcon
+- StampIcon
+- StampOutlineIcon
+- StarIcon
+- StarOutlineIcon
+- StatsIcon
+- StatsOutlineIcon
+- StopIcon
+- StopOutlineIcon
+- StyleIcon
+- StyleOutlineIcon
+- SubtitlesCrossedIcon
+- SubtitlesCrossedOutlineIcon
+- SubtitlesIcon
+- SubtitlesOutlineIcon
+- SuccessIcon
+- SuccessOutlineIcon
+- SunIcon
+- SunOutlineIcon
+- TabletIcon
+- TabletOutlineIcon
+- TagIcon
+- TagOutlineIcon
+- TargetIcon
+- TargetOutlineIcon
+- TeamIcon
+- TeamOutlineIcon
+- TelegramIcon
+- TextAlignCenterIcon
+- TextAlignCenterOutlineIcon
+- TextAlignLeftIcon
+- TextAlignLeftOutlineIcon
+- TextAlignRightIcon
+- TextAlignRightOutlineIcon
+- ThemeIcon
+- ThemeOutlineIcon
+- ThumbsDownIcon
+- ThumbsDownOutlineIcon
+- ThumbsUpIcon
+- ThumbsUpOutlineIcon
+- TiktokIcon
+- TouchIcon
+- TouchOutlineIcon
+- TrashIcon
+- TrashOutlineIcon
+- TreeIcon
+- TreeOutlineIcon
+- TwitterIcon
+- UndoIcon
+- UndoOutlineIcon
+- UpIcon
+- UpOutlineIcon
+- UploadIcon
+- UploadOutlineIcon
+- VkIcon
+- VolumeIcon
+- VolumeOutlineIcon
+- WarningIcon
+- WarningOutlineIcon
+- WechatIcon
+- WeiboIcon
+- WiFiIcon
+- WiFiOutlineIcon
+- WinIcon
+- WinOutlineIcon
+- WindowsIcon
+- YoutubeIcon
+- ZhihuIcon
+### Usage
+```tsx
+import { CompanyIcon } from '@rescui/icons';
+<CompanyIcon />;
+```
+### Loading icon animation
+Animation inside `<svg>` tags can affect performance on pages with lots of loading icons.
+If you encounter performance issues, put loading icons as a background image for span and animate them like in this example:
+```tsx
+import loadingOutlineIconSrc from '@rescui/icons/svg/loading-outline_24.svg';
+<>
+  <style>{`
+.my-loading-icon {
+  background-image: url(${loadingOutlineIconSrc.src});
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  animation: rs-icon-rotate 1s linear infinite;
+  transform-origin:center center
+}
+`}</style>
+  <span className="my-loading-icon" />
+</>;
+```
+#### Simple benchmark
+Here's an interactive comparison showcasing a possible performance hit (More FPS = Better).
+```tsx
+import { useRef, useEffect, useState } from 'react';
+import { textCn } from '@rescui/typography';
+import { LoadingOutlineIcon } from '@rescui/icons';
+import { Switcher } from '@rescui/switcher';
+import loadingOutlineIconSrc from '@rescui/icons/svg/loading-outline_24.svg';
+class FPSMeter {
+  constructor(element) {
+    this.times = [];
+    this.element = element;
+  }
+  start() {
+    this.running = true;
+    this._refreshLoop();
+  }
+  stop() {
+    this.running = false;
+  }
+  _refreshLoop() {
+    window.requestAnimationFrame(() => {
+      const now = performance.now();
+      while (this.times.length > 0 && this.times[0] <= now - 1000) {
+        this.times.shift();
+      }
+      this.times.push(now);
+      this.fps = this.times.length;
+      if (this.element) {
+        this.element.textContent = this.fps;
+      }
+      if (this.running) {
+        this._refreshLoop();
+      } else {
+        this.element.textContent = '';
+      }
+    });
+  }
+}
+const Benchmark = () => {
+  const fpsMeterElement = useRef();
+  const [variant, setVariant] = useState('off');
+  useEffect(() => {
+    if (variant === 'off') {
+      return;
+    }
+    const fpsMeter = new FPSMeter(fpsMeterElement.current);
+    fpsMeter.start();
+    return () => fpsMeter.stop();
+  }, [variant]);
+  return (
+    <>
+      <div>
+        <Switcher
+          value={variant}
+          onChange={setVariant}
+          options={[
+            { label: 'Off', value: 'off' },
+            { label: 'Animated SVG', value: 'svg' },
+            { label: 'Animated Background', value: 'span' }
+          ]}
+        />
+        <span style={{ marginLeft: '24px' }} className={textCn('rs-text-2')}>
+          Current FPS:{' '}
+        </span>
+        <span ref={fpsMeterElement} />
+      </div>
+      <div>
+        {Array(1000)
+          .fill(0)
+          .map((_, i) => {
+            switch (variant) {
+              case 'svg':
+                return <LoadingOutlineIcon key={i} />;
+              case 'span':
+                return <span key={i} className="bench-loading-icon" />;
+              default:
+                return null;
+            }
+          })}
+      </div>
+      <style>{`
+.bench-loading-icon {
+  background-image: url(${loadingOutlineIconSrc.src});
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  animation: rs-icon-rotate 1s linear infinite;
+  transform-origin:center center
+}
+`}</style>
+    </>
+  );
+};
+render(<Benchmark />);
+```
+## CSS API
+#### `Icon` mixins
+| Mixin name | Details |
+| --- | --- |
+| `rs-icon-size-xs` | prop: `size`<br><br>value: `"xs"` |
+| `rs-icon-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-icon-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-icon-size-l` | prop: `size`<br><br>value: `"l"` |
+##### Demo
+Must be used with `data-render-all-sizes` prop
+Use the controls to see the effect at different viewport widths.
+```tsx
+import { PersonOutlineIcon } from '@rescui/icons';
+const MyIcon = () => {
+  return (
+    <PersonOutlineIcon className="my-icon" size="m" data-render-all-sizes />
+  );
+};
+render(<MyIcon />);
+```
+```postcss attached
+@import '@rescui/icons/lib/public-api.p.css';
+.my-icon {
+  @media (max-width: 640px) {
+    @mixin rs-icon-size-l;
+  }
+  @media (max-width: 500px) {
+    @mixin rs-icon-size-s;
+  }
+}
+```
+#### CSS Vars
+| Variable | Syntax | Description |
+| --- | --- | --- |
+| `--rs-icons-height` | [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height) | The height of the icon. Because of the fixed `view-box` (which corresponds to the aspect-ration), this variable controls both width and height of the icon by default. |
+| `--rs-icons-width` | [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | The width of the icon. `auto` by default - calculates automatically based on the icon height. Should be used only for edge-cases like fixing the flex dimensions. |
+##### Demo
+```tsx
+import { PersonOutlineIcon } from '@rescui/icons';
+render(
+  <div>
+    <PersonOutlineIcon size="m" style={{ '--rs-icons-height': '64px' }} />
+  </div>
+);
+```

package/llm/index.md ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ - Components and Hooks
2	+ - [Icons](./components/icons.md)

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/icons",
-  "version": "1.8.1",
+  "version": "1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -10,6 +10,7 @@
   "files": [
     "lib",
     "!lib/*.doc-only.*",
+    "llm",
     "svg",
     "LICENSE.txt"
   ],
@@ -26,14 +27,14 @@
   },
   "peerDependencies": {
     "prop-types": "^15",
-    "react": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/babel-plugin-postcss-modules": "^0.0.5",
-    "@rescui/colors": "^0.3.1",
-    "@rescui/postcss-preset-library": "^0.2.2",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.1",
+    "@rescui/babel-plugin-postcss-modules": "0.0.5",
+    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/postcss-preset-library": "0.2.2",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
     "postcss-modules": "^4.0.0",
     "postsvg": "2.2.7",
     "react-copy-to-clipboard": "^5.0.3"
@@ -44,5 +45,5 @@
     "svg-to-jsx": "rescui-scripts svg-to-jsx --src=svg --out=lib --template=template.js --ts-template=ts-template.js --typings-dir=lib"
   },
   "nx": {},
-  "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
+  "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
 }