@rescui/icons 1.8.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.14 → 1.8.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.15

package/lib/index.css

@@ -1,4 +1,4 @@
-._icon_16ewrhm_4{
+._icon_1wzcoos_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_16ewrhm_4{
+._icon_1wzcoos_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_16ewrhm_4{
+._icon_1wzcoos_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_16ewrhm_4{
+._icon_1wzcoos_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_16ewrhm_14{
+._sizeXS_1wzcoos_14{
   --_rs-icons-height:16px;
 }
-._sizeS_16ewrhm_18{
+._sizeS_1wzcoos_18{
   --_rs-icons-height:20px;
 }
-._sizeM_16ewrhm_22{
+._sizeM_1wzcoos_22{
   --_rs-icons-height:24px;
 }
-._sizeL_16ewrhm_26{
+._sizeL_1wzcoos_26{
   --_rs-icons-height:28px;
 }
-._light_16ewrhm_30{
+._light_1wzcoos_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_16ewrhm_34{
+._dark_1wzcoos_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_16ewrhm_48{
+._allVariants_1wzcoos_48{
   aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
   container:rs-icon / size;
 }
-._variant16_16ewrhm_53,
-._variant20_16ewrhm_54,
-._variant24_16ewrhm_55{
+._variant16_1wzcoos_53,
+._variant20_1wzcoos_54,
+._variant24_1wzcoos_55{
   display:none;
 }
-._variant28_16ewrhm_58{
+._variant28_1wzcoos_58{
   display:block;
 }
 @container rs-icon (max-height: 24px){
-  ._variant24_16ewrhm_55{
+  ._variant24_1wzcoos_55{
     display:block;
   }
-  ._variant28_16ewrhm_58{
+  ._variant28_1wzcoos_58{
     display:none;
   }
 }
 @container rs-icon (max-height: 20px){
-  ._variant20_16ewrhm_54{
+  ._variant20_1wzcoos_54{
     display:block;
   }
-  ._variant24_16ewrhm_55{
+  ._variant24_1wzcoos_55{
     display:none;
   }
 }
 @container rs-icon (max-height: 16px){
-  ._variant16_16ewrhm_53{
+  ._variant16_1wzcoos_53{
     display:block;
   }
-  ._variant20_16ewrhm_54{
+  ._variant20_1wzcoos_54{
     display:none;
   }
 }

package/lib/index.css.js

@@ -1,15 +1,15 @@
 export default {
-  "icon": "_icon_16ewrhm_4",
-  "sizeXS": "_sizeXS_16ewrhm_14",
-  "sizeS": "_sizeS_16ewrhm_18",
-  "sizeM": "_sizeM_16ewrhm_22",
-  "sizeL": "_sizeL_16ewrhm_26",
-  "light": "_light_16ewrhm_30",
-  "dark": "_dark_16ewrhm_34",
-  "allVariants": "_allVariants_16ewrhm_48",
-  "variant16": "_variant16_16ewrhm_53",
-  "variant20": "_variant20_16ewrhm_54",
-  "variant24": "_variant24_16ewrhm_55",
-  "variant28": "_variant28_16ewrhm_58"
+  "icon": "_icon_1wzcoos_4",
+  "sizeXS": "_sizeXS_1wzcoos_14",
+  "sizeS": "_sizeS_1wzcoos_18",
+  "sizeM": "_sizeM_1wzcoos_22",
+  "sizeL": "_sizeL_1wzcoos_26",
+  "light": "_light_1wzcoos_30",
+  "dark": "_dark_1wzcoos_34",
+  "allVariants": "_allVariants_1wzcoos_48",
+  "variant16": "_variant16_1wzcoos_53",
+  "variant20": "_variant20_1wzcoos_54",
+  "variant24": "_variant24_1wzcoos_55",
+  "variant28": "_variant28_1wzcoos_58"
 };
 //# sourceMappingURL=index.css.js.map

package/lib/index.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.css.js","names":[],"sources":["index.css.js"],"sourcesContent":["export default {\"icon\":\"_icon_16ewrhm_4\",\"sizeXS\":\"_sizeXS_16ewrhm_14\",\"sizeS\":\"_sizeS_16ewrhm_18\",\"sizeM\":\"_sizeM_16ewrhm_22\",\"sizeL\":\"_sizeL_16ewrhm_26\",\"light\":\"_light_16ewrhm_30\",\"dark\":\"_dark_16ewrhm_34\",\"allVariants\":\"_allVariants_16ewrhm_48\",\"variant16\":\"_variant16_16ewrhm_53\",\"variant20\":\"_variant20_16ewrhm_54\",\"variant24\":\"_variant24_16ewrhm_55\",\"variant28\":\"_variant28_16ewrhm_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"}
+{"version":3,"file":"index.css.js","names":[],"sources":["index.css.js"],"sourcesContent":["export default {\"icon\":\"_icon_1wzcoos_4\",\"sizeXS\":\"_sizeXS_1wzcoos_14\",\"sizeS\":\"_sizeS_1wzcoos_18\",\"sizeM\":\"_sizeM_1wzcoos_22\",\"sizeL\":\"_sizeL_1wzcoos_26\",\"light\":\"_light_1wzcoos_30\",\"dark\":\"_dark_1wzcoos_34\",\"allVariants\":\"_allVariants_1wzcoos_48\",\"variant16\":\"_variant16_1wzcoos_53\",\"variant20\":\"_variant20_1wzcoos_54\",\"variant24\":\"_variant24_1wzcoos_55\",\"variant28\":\"_variant28_1wzcoos_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

@@ -0,0 +1,585 @@
+# 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
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { PersonOutlineIcon } from '@rescui/icons';
+
+const MyIcon = ({ className }) => {
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <PersonOutlineIcon className={className} size="m" data-render-all-sizes />
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyIcon />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyIcon className={`my-icon-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyIcon className={`my-icon-var-1 my-icon-var-2`} />
+    </div>
+  </div>
+);
+```
+
+```postcss attached
+@import '@rescui/icons/lib/public-api.p.css';
+
+.my-icon-var-1 {
+  @mixin rs-icon-size-l;
+}
+.my-icon-var-2 {
+  @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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/icons",
-  "version": "1.8.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.14+2a311c841",
+  "version": "1.8.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.15+b138dd5bf",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -10,6 +10,7 @@
   "files": [
     "lib",
     "!lib/*.doc-only.*",
+    "llm",
     "svg",
     "LICENSE.txt"
   ],
@@ -30,10 +31,10 @@
   },
   "devDependencies": {
     "@rescui/babel-plugin-postcss-modules": "0.0.5",
-    "@rescui/colors": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.53+2a311c841",
+    "@rescui/colors": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.54+b138dd5bf",
     "@rescui/postcss-preset-library": "0.2.2",
     "@rescui/scripts": "0.5.2",
-    "@rescui/typography": "0.27.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18+2a311c841",
+    "@rescui/typography": "0.27.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.19+b138dd5bf",
     "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": "2a311c841551a48c46895aff5609fe099bbe1a61"
+  "gitHead": "b138dd5bf3dbdca6c21fa339dd567517d5c5d1d9"
 }