✨ feat(react): 添加样式

docs/components/example.tsx

@@ -1,7 +1,11 @@
-import { AccountBookFilled } from '@lotus-design/icons';
+import React from 'react';
+import { AccountBookFilled, AccountBookOutlined, } from '@lotus-design/icons';
 
 export default () => {
   return (
-    <AccountBookFilled />
+    <>
+      <AccountBookFilled />
+      <AccountBookOutlined spin />
+    </>
   )
 }

packages/react/package.json

@@ -22,7 +22,8 @@
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
     "@lotus-design/icons-svg": "^1.0.0",
-    "@pansy/classnames": "^1.0.1"
+    "@pansy/classnames": "^1.0.1",
+    "rc-util": "^5.19.3"
   },
   "author": "",
   "license": "MIT"

packages/react/src/components/Icon.tsx

@@ -4,6 +4,8 @@ import classNames from '@pansy/classnames';
 import Context from './Context';
 import { svgBaseProps } from '../utils';
 
+import { useInsertStyles } from '../hooks/useInsertStyles';
+
 export interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
   spin?: boolean;
   rotate?: number;
@@ -42,6 +44,8 @@ const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>(({
   ...restProps
 }, ref) => {
 
+  useInsertStyles();
+
   const { prefixCls = 'lotus-icon' } = React.useContext(Context);
 
   const classString = classNames(

packages/react/src/components/IconBase.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AbstractNode, IconDefinition } from '@lotus-design/icons-svg/lib/types';
 
+import { useInsertStyles } from '../hooks/useInsertStyles';
 import { getSecondaryColor, isIconDefinition, generate, } from '../utils';
 
 export interface IconProps extends Partial<TwoToneColorPaletteSetter> {
@@ -56,6 +57,8 @@ const IconBase: IconBaseComponent<IconProps> = ({
   secondaryColor,
   ...restProps
 }) => {
+  useInsertStyles();
+
   let colors: TwoToneColorPalette = twoToneColorPalette;
   if (primaryColor) {
     colors = {

packages/react/src/hooks/useInsertStyles.ts

@@ -0,0 +1,69 @@
+import { useContext, useEffect } from 'react';
+import IconContext from '../components/Context';
+import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
+
+
+export const useInsertStyles = (styleStr?: string) => {
+  const { csp, prefixCls = 'lotus-icon' } = useContext(IconContext);
+
+  useEffect(() => {
+    updateCSS(styleStr ?? getIconStyles(prefixCls), 'lotus-design-icons', {
+      prepend: true,
+      csp,
+    });
+  }, []);
+};
+
+function getIconStyles (prefixCls: string) {
+  return `
+    .${prefixCls} {
+      display: inline-block;
+      color: inherit;
+      font-style: normal;
+      line-height: 0;
+      text-align: center;
+      text-transform: none;
+      vertical-align: -0.125em;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    .${prefixCls} > * {
+      line-height: 1;
+    }
+
+    .${prefixCls} svg {
+      display: inline-block;
+    }
+
+    .${prefixCls}::before {
+      display: none;
+    }
+
+    .${prefixCls}[tabindex] {
+      cursor: pointer;
+    }
+
+    .${prefixCls}-spin::before,
+    .${prefixCls}-spin {
+      display: inline-block;
+      -webkit-animation: loadingCircle 1s infinite linear;
+      animation: loadingCircle 1s infinite linear;
+    }
+
+    @-webkit-keyframes loadingCircle {
+      100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes loadingCircle {
+      100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+  `
+}