@fe-free/icons 3.0.29 → 3.0.31

package/src/icons/XFilled.tsx

@@ -2,6 +2,6 @@ import { createIcon } from '../utils';
 
 const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g fill="none" fillRule="evenodd" stroke="none" stroke-width="1" transform="translate(112 112)"><path fill="#000" d="M711.111 800H88.89C39.8 800 0 760.2 0 711.111V88.89C0 39.8 39.8 0 88.889 0H711.11C760.2 0 800 39.8 800 88.889V711.11C800 760.2 760.2 800 711.111 800"/><path fill="#FFF" fillRule="nonzero" d="M628 623H484.942L174 179h143.058zm-126.012-37.651h56.96L300.013 216.65h-56.96z"/><path fill="#FFF" fillRule="nonzero" d="M219.296885 623 379 437.732409 358.114212 410 174 623z"/><path fill="#FFF" fillRule="nonzero" d="M409 348.387347 429.212986 377 603 177 558.330417 177z"/></g></svg>`;
 
-export const XFilled = createIcon('XFilled', svgContent);
+export const XFilled = createIcon('XFilled', 'x', svgContent);
 
 export default XFilled;

package/src/icons/XOutlined.tsx

@@ -2,6 +2,6 @@ import { createIcon } from '../utils';
 
 const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor" fillRule="evenodd"><path d="M818 800 498.11 333.745l.546.437L787.084 0h-96.385L455.738 272 269.15 0H16.367l298.648 435.31-.036-.037L0 800h96.385l261.222-302.618L565.217 800zM230.96 72.727l448.827 654.546h-76.38L154.217 72.727z" transform="translate(103 112)"/></svg>`;
 
-export const XOutlined = createIcon('XOutlined', svgContent);
+export const XOutlined = createIcon('XOutlined', 'x', svgContent);
 
 export default XOutlined;

package/src/icons/YahooFilled.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M937.3 231H824.7c-15.5 0-27.7 12.6-27.1 28.1l13.1 366h84.4l65.4-366.4c2.7-15.2-7.8-27.7-23.2-27.7zm-77.4 450.4h-14.1c-27.1 0-49.2 22.2-49.2 49.3v14.1c0 27.1 22.2 49.3 49.2 49.3h14.1c27.1 0 49.2-22.2 49.2-49.3v-14.1c0-27.1-22.2-49.3-49.2-49.3zM402.6 231C216.2 231 65 357 65 512.5S216.2 794 402.6 794s337.6-126 337.6-281.5S589.1 231 402.6 231zm225.2 225.2h-65.3L458.9 559.8v65.3h84.4v56.3H318.2v-56.3h84.4v-65.3L242.9 399.9h-37v-56.3h168.5v56.3h-37l93.4 93.5 28.1-28.1V400h168.8v56.2z"/>
 </svg>`;
 
-export const YahooFilled = createIcon('YahooFilled', svgContent);
+export const YahooFilled = createIcon('YahooFilled', 'yahoo', svgContent);
 
 export default YahooFilled;

package/src/icons/YahooOutlined.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M859.9 681.4h-14.1c-27.1 0-49.2 22.2-49.2 49.3v14.1c0 27.1 22.2 49.3 49.2 49.3h14.1c27.1 0 49.2-22.2 49.2-49.3v-14.1c0-27.1-22.2-49.3-49.2-49.3zM402.6 231C216.2 231 65 357 65 512.5S216.2 794 402.6 794s337.6-126 337.6-281.5S589.1 231 402.6 231zm0 507C245.1 738 121 634.6 121 512.5c0-62.3 32.3-119.7 84.9-161v48.4h37l159.8 159.9v65.3h-84.4v56.3h225.1v-56.3H459v-65.3l103.5-103.6h65.3v-56.3H459v65.3l-28.1 28.1-93.4-93.5h37v-56.3H216.4c49.4-35 114.3-56.6 186.2-56.6 157.6 0 281.6 103.4 281.6 225.5S560.2 738 402.6 738zm534.7-507H824.7c-15.5 0-27.7 12.6-27.1 28.1l13.1 366h84.4l65.4-366.4c2.7-15.2-7.8-27.7-23.2-27.7z"/>
 </svg>`;
 
-export const YahooOutlined = createIcon('YahooOutlined', svgContent);
+export const YahooOutlined = createIcon('YahooOutlined', 'yahoo', svgContent);
 
 export default YahooOutlined;

package/src/icons/YoutubeFilled.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M941.3 296.1a112.3 112.3 0 0 0-79.2-79.3C792.2 198 512 198 512 198s-280.2 0-350.1 18.7A112.12 112.12 0 0 0 82.7 296C64 366 64 512 64 512s0 146 18.7 215.9c10.3 38.6 40.7 69 79.2 79.3C231.8 826 512 826 512 826s280.2 0 350.1-18.8c38.6-10.3 68.9-40.7 79.2-79.3C960 658 960 512 960 512s0-146-18.7-215.9zM423 646V378l232 133-232 135z"/>
 </svg>`;
 
-export const YoutubeFilled = createIcon('YoutubeFilled', svgContent);
+export const YoutubeFilled = createIcon('YoutubeFilled', 'youtube', svgContent);
 
 export default YoutubeFilled;

package/src/icons/YoutubeOutlined.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M960 509.2c0-2.2 0-4.7-.1-7.6-.1-8.1-.3-17.2-.5-26.9-.8-27.9-2.2-55.7-4.4-81.9-3-36.1-7.4-66.2-13.4-88.8a139.52 139.52 0 0 0-98.3-98.5c-28.3-7.6-83.7-12.3-161.7-15.2-37.1-1.4-76.8-2.3-116.5-2.8-13.9-.2-26.8-.3-38.4-.4h-29.4c-11.6.1-24.5.2-38.4.4-39.7.5-79.4 1.4-116.5 2.8-78 3-133.5 7.7-161.7 15.2A139.35 139.35 0 0 0 82.4 304C76.3 326.6 72 356.7 69 392.8c-2.2 26.2-3.6 54-4.4 81.9-.3 9.7-.4 18.8-.5 26.9 0 2.9-.1 5.4-.1 7.6v5.6c0 2.2 0 4.7.1 7.6.1 8.1.3 17.2.5 26.9.8 27.9 2.2 55.7 4.4 81.9 3 36.1 7.4 66.2 13.4 88.8 12.8 47.9 50.4 85.7 98.3 98.5 28.2 7.6 83.7 12.3 161.7 15.2 37.1 1.4 76.8 2.3 116.5 2.8 13.9.2 26.8.3 38.4.4h29.4c11.6-.1 24.5-.2 38.4-.4 39.7-.5 79.4-1.4 116.5-2.8 78-3 133.5-7.7 161.7-15.2 47.9-12.8 85.5-50.5 98.3-98.5 6.1-22.6 10.4-52.7 13.4-88.8 2.2-26.2 3.6-54 4.4-81.9.3-9.7.4-18.8.5-26.9 0-2.9.1-5.4.1-7.6v-5.6zm-72 5.2c0 2.1 0 4.4-.1 7.1-.1 7.8-.3 16.4-.5 25.7-.7 26.6-2.1 53.2-4.2 77.9-2.7 32.2-6.5 58.6-11.2 76.3-6.2 23.1-24.4 41.4-47.4 47.5-21 5.6-73.9 10.1-145.8 12.8-36.4 1.4-75.6 2.3-114.7 2.8-13.7.2-26.4.3-37.8.3h-28.6l-37.8-.3c-39.1-.5-78.2-1.4-114.7-2.8-71.9-2.8-124.9-7.2-145.8-12.8-23-6.2-41.2-24.4-47.4-47.5-4.7-17.7-8.5-44.1-11.2-76.3-2.1-24.7-3.4-51.3-4.2-77.9-.3-9.3-.4-18-.5-25.7 0-2.7-.1-5.1-.1-7.1v-4.8c0-2.1 0-4.4.1-7.1.1-7.8.3-16.4.5-25.7.7-26.6 2.1-53.2 4.2-77.9 2.7-32.2 6.5-58.6 11.2-76.3 6.2-23.1 24.4-41.4 47.4-47.5 21-5.6 73.9-10.1 145.8-12.8 36.4-1.4 75.6-2.3 114.7-2.8 13.7-.2 26.4-.3 37.8-.3h28.6l37.8.3c39.1.5 78.2 1.4 114.7 2.8 71.9 2.8 124.9 7.2 145.8 12.8 23 6.2 41.2 24.4 47.4 47.5 4.7 17.7 8.5 44.1 11.2 76.3 2.1 24.7 3.4 51.3 4.2 77.9.3 9.3.4 18 .5 25.7 0 2.7.1 5.1.1 7.1v4.8zM423 646l232-135-232-133z"/>
 </svg>`;
 
-export const YoutubeOutlined = createIcon('YoutubeOutlined', svgContent);
+export const YoutubeOutlined = createIcon('YoutubeOutlined', 'youtube', svgContent);
 
 export default YoutubeOutlined;

package/src/icons/YuqueFilled.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M854.6 370.6c-9.9-39.4 9.9-102.2 73.4-124.4l-67.9-3.6s-25.7-90-143.6-98c-117.9-8.1-195-3-195-3s87.4 55.6 52.4 154.7c-25.6 52.5-65.8 95.6-108.8 144.7-1.3 1.3-2.5 2.6-3.5 3.7C319.4 605 96 860 96 860c245.9 64.4 410.7-6.3 508.2-91.1 20.5-.2 35.9-.3 46.3-.3 135.8 0 250.6-117.6 245.9-248.4-3.2-89.9-31.9-110.2-41.8-149.6z"/>
 </svg>`;
 
-export const YuqueFilled = createIcon('YuqueFilled', svgContent);
+export const YuqueFilled = createIcon('YuqueFilled', 'yuque', svgContent);
 
 export default YuqueFilled;

package/src/icons/YuqueOutlined.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M854.6 370.6c-9.9-39.4 9.9-102.2 73.4-124.4l-67.9-3.6s-25.7-90-143.6-98c-117.8-8.1-194.9-3-195-3 .1 0 87.4 55.6 52.4 154.7-25.6 52.5-65.8 95.6-108.8 144.7-1.3 1.3-2.5 2.6-3.5 3.7C319.4 605 96 860 96 860c245.9 64.4 410.7-6.3 508.2-91.1 20.5-.2 35.9-.3 46.3-.3 135.8 0 250.6-117.6 245.9-248.4-3.2-89.9-31.9-110.2-41.8-149.6zm-204.1 334c-10.6 0-26.2.1-46.8.3l-23.6.2-17.8 15.5c-47.1 41-104.4 71.5-171.4 87.6-52.5 12.6-110 16.2-172.7 9.6 18-20.5 36.5-41.6 55.4-63.1 92-104.6 173.8-197.5 236.9-268.5l1.4-1.4 1.3-1.5c4.1-4.6 20.6-23.3 24.7-28.1 9.7-11.1 17.3-19.9 24.5-28.6 30.7-36.7 52.2-67.8 69-102.2l1.6-3.3 1.2-3.4c13.7-38.8 15.4-76.9 6.2-112.8 22.5.7 46.5 1.9 71.7 3.6 33.3 2.3 55.5 12.9 71.1 29.2 5.8 6 10.2 12.5 13.4 18.7 1 2 1.7 3.6 2.3 5l5 17.7c-15.7 34.5-19.9 73.3-11.4 107.2 3 11.8 6.9 22.4 12.3 34.4 2.1 4.7 9.5 20.1 11 23.3 10.3 22.7 15.4 43 16.7 78.7 3.3 94.6-82.7 181.9-182 181.9z"/>
 </svg>`;
 
-export const YuqueOutlined = createIcon('YuqueOutlined', svgContent);
+export const YuqueOutlined = createIcon('YuqueOutlined', 'yuque', svgContent);
 
 export default YuqueOutlined;

package/src/icons/ZhihuCircleFilled.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-90.7 477.8l-.1 1.5c-1.5 20.4-6.3 43.9-12.9 67.6l24-18.1 71 80.7c9.2 33-3.3 63.1-3.3 63.1l-95.7-111.9v-.1c-8.9 29-20.1 57.3-33.3 84.7-22.6 45.7-55.2 54.7-89.5 57.7-34.4 3-23.3-5.3-23.3-5.3 68-55.5 78-87.8 96.8-123.1 11.9-22.3 20.4-64.3 25.3-96.8H264.1s4.8-31.2 19.2-41.7h101.6c.6-15.3-1.3-102.8-2-131.4h-49.4c-9.2 45-41 56.7-48.1 60.1-7 3.4-23.6 7.1-21.1 0 2.6-7.1 27-46.2 43.2-110.7 16.3-64.6 63.9-62 63.9-62-12.8 22.5-22.4 73.6-22.4 73.6h159.7c10.1 0 10.6 39 10.6 39h-90.8c-.7 22.7-2.8 83.8-5 131.4H519s12.2 15.4 12.2 41.7H421.3zm346.5 167h-87.6l-69.5 46.6-16.4-46.6h-40.1V321.5h213.6v387.3zM408.2 611s0-.1 0 0zm216 94.3l56.8-38.1h45.6-.1V364.7H596.7v302.5h14.1z"/>
 </svg>`;
 
-export const ZhihuCircleFilled = createIcon('ZhihuCircleFilled', svgContent);
+export const ZhihuCircleFilled = createIcon('ZhihuCircleFilled', 'zhihu-circle', svgContent);
 
 export default ZhihuCircleFilled;

package/src/icons/ZhihuOutlined.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M564.7 230.1V803h60l25.2 71.4L756.3 803h131.5V230.1H564.7zm247.7 497h-59.9l-75.1 50.4-17.8-50.4h-18V308.3h170.7v418.8zM526.1 486.9H393.3c2.1-44.9 4.3-104.3 6.6-172.9h130.9l-.1-8.1c0-.6-.2-14.7-2.3-29.1-2.1-15-6.6-34.9-21-34.9H287.8c4.4-20.6 15.7-69.7 29.4-93.8l6.4-11.2-12.9-.7c-.8 0-19.6-.9-41.4 10.6-35.7 19-51.7 56.4-58.7 84.4-18.4 73.1-44.6 123.9-55.7 145.6-3.3 6.4-5.3 10.2-6.2 12.8-1.8 4.9-.8 9.8 2.8 13 10.5 9.5 38.2-2.9 38.5-3 .6-.3 1.3-.6 2.2-1 13.9-6.3 55.1-25 69.8-84.5h56.7c.7 32.2 3.1 138.4 2.9 172.9h-141l-2.1 1.5c-23.1 16.9-30.5 63.2-30.8 65.2l-1.4 9.2h167c-12.3 78.3-26.5 113.4-34 127.4-3.7 7-7.3 14-10.7 20.8-21.3 42.2-43.4 85.8-126.3 153.6-3.6 2.8-7 8-4.8 13.7 2.4 6.3 9.3 9.1 24.6 9.1 5.4 0 11.8-.3 19.4-1 49.9-4.4 100.8-18 135.1-87.6 17-35.1 31.7-71.7 43.9-108.9L497 850l5-12c.8-1.9 19-46.3 5.1-95.9l-.5-1.8-108.1-123-22 16.6c6.4-26.1 10.6-49.9 12.5-71.1h158.7v-8c0-40.1-18.5-63.9-19.2-64.9l-2.4-3z"/>
 </svg>`;
 
-export const ZhihuOutlined = createIcon('ZhihuOutlined', svgContent);
+export const ZhihuOutlined = createIcon('ZhihuOutlined', 'zhihu', svgContent);
 
 export default ZhihuOutlined;

package/src/icons/ZhihuSquareFilled.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM432.3 592.8l71 80.7c9.2 33-3.3 63.1-3.3 63.1l-95.7-111.9v-.1c-8.9 29-20.1 57.3-33.3 84.7-22.6 45.7-55.2 54.7-89.5 57.7-34.4 3-23.3-5.3-23.3-5.3 68-55.5 78-87.8 96.8-123.1 11.9-22.3 20.4-64.3 25.3-96.8H264.1s4.8-31.2 19.2-41.7h101.6c.6-15.3-1.3-102.8-2-131.4h-49.4c-9.2 45-41 56.7-48.1 60.1-7 3.4-23.6 7.1-21.1 0 2.6-7.1 27-46.2 43.2-110.7 16.3-64.6 63.9-62 63.9-62-12.8 22.5-22.4 73.6-22.4 73.6h159.7c10.1 0 10.6 39 10.6 39h-90.8c-.7 22.7-2.8 83.8-5 131.4H519s12.2 15.4 12.2 41.7h-110l-.1 1.5c-1.5 20.4-6.3 43.9-12.9 67.6l24.1-18.1zm335.5 116h-87.6l-69.5 46.6-16.4-46.6h-40.1V321.5h213.6v387.3zM408.2 611s0-.1 0 0zm216 94.3l56.8-38.1h45.6-.1V364.7H596.7v302.5h14.1z"/>
 </svg>`;
 
-export const ZhihuSquareFilled = createIcon('ZhihuSquareFilled', svgContent);
+export const ZhihuSquareFilled = createIcon('ZhihuSquareFilled', 'zhihu-square', svgContent);
 
 export default ZhihuSquareFilled;

package/src/icons/ZoomInOutlined.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"/>
 </svg>`;
 
-export const ZoomInOutlined = createIcon('ZoomInOutlined', svgContent);
+export const ZoomInOutlined = createIcon('ZoomInOutlined', 'zoom-in', svgContent);
 
 export default ZoomInOutlined;

package/src/icons/ZoomOutOutlined.tsx

@@ -5,6 +5,6 @@ const svgContent = `<?xml version="1.0" standalone="no"?>
   <path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"/>
 </svg>`;
 
-export const ZoomOutOutlined = createIcon('ZoomOutOutlined', svgContent);
+export const ZoomOutOutlined = createIcon('ZoomOutOutlined', 'zoom-out', svgContent);
 
 export default ZoomOutOutlined;

package/src/icons.stories.tsx

@@ -1,3 +1,4 @@
+import { DeleteOutlined } from '@ant-design/icons';
 import * as Icons from '@fe-free/icons';
 import { copyToClipboard } from '@fe-free/tool';
 import type { Meta, StoryObj } from '@storybook/react-vite';
@@ -148,6 +149,13 @@ export const Usages: Story = {
       <Icons.DeleteOutlined className="text-primary" />
       <Icons.DeleteOutlined rotate={45} />
       <Icons.DeleteOutlined spin className="text-2xl" />
+
+      <div className="text-2xl">
+        @fe-free/icons 图标 <Icons.DeleteOutlined />
+      </div>
+      <div className="text-2xl">
+        @ant-design/icons 图标 <DeleteOutlined />
+      </div>
     </div>
   ),
 };

package/src/index.ts

@@ -1,4 +1,8 @@
 export * from './types';
+
+import Icons from '@ant-design/icons';
+export default Icons;
+
 export { AccountBookFilled } from './icons/AccountBookFilled';
 export { AlertFilled } from './icons/AlertFilled';
 export { AlipayCircleFilled } from './icons/AlipayCircleFilled';

package/src/types.ts

@@ -1,7 +1,6 @@
 import type React from 'react';
 
-interface IconBaseProps extends React.SVGProps<SVGSVGElement> {
-  size?: string | number;
+interface IconBaseProps extends React.HTMLAttributes<HTMLSpanElement> {
   spin?: boolean;
   rotate?: number;
   className?: string;

package/src/utils.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 import type { IconComponentProps } from './types';
 
@@ -35,24 +36,37 @@ function extractSvgContent(svgContent: string): string {
  */
 function createIcon(
   name: string,
+  baseName: string,
   svgContent: string,
 ): React.ForwardRefExoticComponent<
-  Omit<IconComponentProps, 'ref'> & React.RefAttributes<SVGSVGElement>
+  Omit<IconComponentProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
 > {
   const viewBox = extractViewBox(svgContent);
   const innerContent = extractSvgContent(svgContent);
 
-  const IconComponent = React.forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => {
+  const IconComponent = React.forwardRef<HTMLSpanElement, IconComponentProps>((props, ref) => {
     const {
-      size = '1em',
       spin = false,
       rotate,
       style,
       className,
       viewBox: propsViewBox,
+      onClick,
+      tabIndex,
       ...restProps
     } = props;
 
+    const prefixCls = 'anticon';
+    const classString = classNames(
+      'fec-icon',
+      prefixCls,
+      {
+        [`${prefixCls}-${baseName}`]: !!baseName,
+        [`${prefixCls}-spin`]: !!spin || baseName === 'loading',
+      },
+      className,
+    );
+
     const mergedStyle: React.CSSProperties = {
       display: 'inline-block',
       ...style,
@@ -64,25 +78,38 @@ function createIcon(
         : {}),
     };
 
+    let iconTabIndex = tabIndex;
+    if (iconTabIndex === undefined && onClick) {
+      iconTabIndex = -1;
+    }
+
     return (
-      <svg
-        viewBox={propsViewBox || viewBox}
-        width={size}
-        height={size}
-        fill="currentColor"
-        className={className}
-        style={mergedStyle}
-        ref={ref}
+      <span
+        role="img"
+        aria-label={baseName}
         {...restProps}
-        dangerouslySetInnerHTML={{ __html: innerContent }}
-      />
+        ref={ref}
+        tabIndex={iconTabIndex}
+        onClick={onClick}
+        className={classString}
+      >
+        <svg
+          viewBox={propsViewBox || viewBox}
+          width={'1em'}
+          height={'1em'}
+          fill="currentColor"
+          style={mergedStyle}
+          {...restProps}
+          dangerouslySetInnerHTML={{ __html: innerContent }}
+        />
+      </span>
     );
   });
 
   IconComponent.displayName = name;
 
   return IconComponent as React.ForwardRefExoticComponent<
-    Omit<IconComponentProps, 'ref'> & React.RefAttributes<SVGSVGElement>
+    Omit<IconComponentProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
   >;
 }