@test-icons/react 0.0.1

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@test-icons/react",
+  "version": "0.0.1",
+  "description": "test icon library - react components",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/icons/ACane.tsx

@@ -0,0 +1,30 @@
+/**
+ * @file ACane 拐杖
+ * @author Auto Generated by HaierIcons
+ */
+
+/* tslint:disable: max-line-length */
+/* eslint-disable max-len */
+import React from 'react';
+import {ISvgIconProps, IconWrapper} from '../runtime';
+
+export default IconWrapper(
+    'a-cane',
+    true,
+    (props: ISvgIconProps) => (
+        <svg
+            width={props.size}
+            height={props.size}
+            viewBox="0 0 48 48"
+            fill="none"
+        >
+            <path
+                d="M19.5576 44.7684C19.5576 44.7684 32.468 20.4873 33.6417 18.28C34.8154 16.0726 37.4535 8.98102 30.3899 5.22524C23.3263 1.46947 19.1571 7.18063 17.7486 9.82948"
+                stroke={props.colors[0]}
+                strokeWidth={props.strokeWidth}
+                strokeLinecap={props.strokeLinecap}
+                strokeLinejoin={props.strokeLinejoin}
+            />
+        </svg>
+    )
+);

package/src/icons/Abdominal.tsx

@@ -0,0 +1,45 @@
+/**
+ * @file Abdominal 腹部
+ * @author Auto Generated by HaierIcons
+ */
+
+/* tslint:disable: max-line-length */
+/* eslint-disable max-len */
+import React from 'react';
+import {ISvgIconProps, IconWrapper} from '../runtime';
+
+export default IconWrapper(
+    'abdominal',
+    false,
+    (props: ISvgIconProps) => (
+        <svg
+            width={props.size}
+            height={props.size}
+            viewBox="0 0 48 48"
+            fill="none"
+        >
+            <path
+                d="M7.89926 5C10.7371 8.01931 12.156 11.9408 12.156 16.7645C12.156 24 5.9995 29.5382 4.969 33.5C4.282 36.1412 3.95884 39.3078 3.9995 43"
+                stroke={props.colors[0]}
+                strokeWidth={props.strokeWidth}
+                strokeLinecap={props.strokeLinecap}
+            />
+            <path
+                d="M39.256 5C36.4182 8.01931 34.9992 11.9408 34.9992 16.7645C34.9992 24 41.1558 29.5382 42.1863 33.5C42.8733 36.1412 43.1964 39.3078 43.1558 43"
+                stroke={props.colors[0]}
+                strokeWidth={props.strokeWidth}
+                strokeLinecap={props.strokeLinecap}
+            />
+            <path
+                d="M6.24414 30.8369C12.7693 34.9668 18.6949 37.0317 24.0211 37.0317C29.3472 37.0317 34.9799 34.9668 40.9192 30.8369"
+                stroke={props.colors[0]}
+                strokeWidth={props.strokeWidth}
+                strokeLinecap={props.strokeLinecap}
+            />
+            <path
+                d="M24 31C25.3807 31 26.5 29.8807 26.5 28.5C26.5 27.1193 25.3807 26 24 26C22.6193 26 21.5 27.1193 21.5 28.5C21.5 29.8807 22.6193 31 24 31Z"
+                fill={props.colors[0]}
+            />
+        </svg>
+    )
+);

package/src/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @file index 引用出口
+ * @author Auto Generated by HaierIcons
+ */
+
+export {default as ACane} from './icons/ACane';
+export {default as Abdominal} from './icons/Abdominal';

package/src/runtime/index.less

@@ -0,0 +1,36 @@
+/**
+ * @file index 样式文件
+ * @author Auto Generated by HaierIcons
+ */
+
+.hi-icon {
+    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;
+
+    &-spin svg {
+        animation: hi-icon-spin 1s infinite linear;
+    }
+}
+
+@keyframes hi-icon-spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}
+
+@-webkit-keyframes hi-icon-spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}
+

package/src/runtime/index.tsx

@@ -0,0 +1,268 @@
+/**
+ * @file runtime 运行时
+ * @author Auto Generated by HaierIcons
+ */
+
+import React, {HTMLAttributes, ReactElement, createContext, useContext, useMemo} from 'react';
+
+// 描边连接类型
+export type StrokeLinejoin = 'miter' | 'round' | 'bevel';
+
+// 描边端点类型
+export type StrokeLinecap = 'butt' | 'round' | 'square';
+
+// 主题
+export type Theme = 'outline' | 'filled' | 'two-tone' | 'multi-color';
+
+
+// 包裹前的图标属性
+export interface ISvgIconProps {
+
+    // 当前图标的唯一Id
+    id: string;
+
+    // 图标尺寸大小，默认1em
+    size: number | string;
+
+    // 描边宽度
+    strokeWidth: number;
+
+    // 描边端点类型
+    strokeLinecap: StrokeLinecap;
+
+    // 描边连接线类型
+    strokeLinejoin: StrokeLinejoin;
+
+    // 换肤的颜色数组
+    colors: string[];
+}
+
+// 图标配置属性
+export interface IIconConfig {
+
+    // 图标尺寸大小，默认1em
+    size: number | string;
+
+    // 描边宽度
+    strokeWidth: number;
+
+    // 描边端点类型
+    strokeLinecap: StrokeLinecap;
+
+    // 描边连接线类型
+    strokeLinejoin: StrokeLinejoin;
+
+    // CSS前缀
+    prefix: string;
+
+    // RTL是否开启
+    rtl: boolean;
+
+    // 默认主题
+    theme: Theme;
+
+    // 主题默认颜色
+    colors: {
+
+        outline: {
+            fill: string;
+            background: string;
+        };
+
+        filled: {
+            fill: string;
+            background: string;
+        };
+
+        twoTone: {
+            fill: string;
+            twoTone: string;
+        };
+
+        multiColor: {
+            outStrokeColor: string;
+            outFillColor: string;
+            innerStrokeColor: string;
+            innerFillColor: string;
+        };
+    };
+}
+
+// 图标基础属性
+export interface IIconBase {
+
+    // 图标尺寸大小，默认1em
+    size?: number | string;
+
+    // 描边宽度
+    strokeWidth?: number;
+
+    // 描边端点类型
+    strokeLinecap?: StrokeLinecap;
+
+    // 描边连接线类型
+    strokeLinejoin?: StrokeLinejoin;
+
+    // 默认主题
+    theme?: Theme;
+
+    // 填充色
+    fill?: string | string[];
+}
+
+// 安全的类型合并
+export type Intersection<T, K> = T & Omit<K, keyof T>;
+
+// 包裹后的图标非扩展属性
+export interface IIcon extends IIconBase {
+    spin?: boolean;
+}
+
+// 包裹后的图标属性
+export type IIconProps = Intersection<IIcon, HTMLAttributes<HTMLSpanElement>>;
+
+// 包裹前的图标
+export type IconRender = (props: ISvgIconProps) => ReactElement;
+
+// 包裹后的图标
+export type Icon = (props: IIconProps) => ReactElement;
+
+// 默认属性
+export const DEFAULT_ICON_CONFIGS: IIconConfig = {
+    size: '1em',
+    strokeWidth: 4,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    rtl: false,
+    theme: 'outline',
+    colors: {
+        outline: {
+            fill: '#333',
+            background: 'transparent'
+        },
+        filled: {
+            fill: '#333',
+            background: '#FFF'
+        },
+        twoTone: {
+            fill: '#333',
+            twoTone: '#2F88FF'
+        },
+        multiColor: {
+            outStrokeColor: '#333',
+            outFillColor: '#2F88FF',
+            innerStrokeColor: '#FFF',
+            innerFillColor: '#43CCF8'
+        }
+    },
+    prefix: 'hi'
+};
+
+function guid(): string {
+    return 'icon-' + (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1);
+}
+
+// 属性转换函数
+export function IconConverter(id: string, icon: IIconBase, config: IIconConfig): ISvgIconProps {
+
+    const fill = typeof icon.fill === 'string' ? [icon.fill] : icon.fill || [];
+    const colors: string[] = [];
+
+    const theme: Theme = icon.theme || config.theme;
+
+    switch (theme) {
+        case 'outline':
+            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
+            colors.push('transparent');
+            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
+            colors.push('transparent');
+            break;
+        case 'filled':
+            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
+            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
+            colors.push('#FFF');
+            colors.push('#FFF');
+            break;
+        case 'two-tone':
+            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
+            colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone);
+            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
+            colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone);
+            break;
+        case 'multi-color':
+            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
+            colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.multiColor.outFillColor);
+            colors.push(typeof fill[2] === 'string' ? fill[2] : config.colors.multiColor.innerStrokeColor);
+            colors.push(typeof fill[3] === 'string' ? fill[3] : config.colors.multiColor.innerFillColor);
+            break;
+    }
+
+    return {
+        size: icon.size || config.size,
+        strokeWidth: icon.strokeWidth || config.strokeWidth,
+        strokeLinecap: icon.strokeLinecap || config.strokeLinecap,
+        strokeLinejoin: icon.strokeLinejoin || config.strokeLinejoin,
+        colors,
+        id
+    };
+}
+
+// 图标配置Context
+const IconContext = createContext(DEFAULT_ICON_CONFIGS);
+
+// 图标配置Provider
+export const IconProvider = IconContext.Provider;
+
+// 图标Wrapper
+export function IconWrapper(name: string, rtl: boolean, render: IconRender): Icon {
+
+    return (props: IIconProps) => {
+
+        const {
+            size,
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            theme,
+            fill,
+            className,
+            spin,
+            ...extra
+        } = props;
+
+        const config = useContext(IconContext);
+
+        const id = useMemo(guid, []);
+
+        const svgProps = IconConverter(id, {
+            size,
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            theme,
+            fill
+        }, config);
+
+        const cls: string[] = ['hi-icon'];
+
+        cls.push('hi-icon' + '-' + name);
+
+        if (rtl && config.rtl) {
+            cls.push('hi-icon-rtl');
+        }
+
+        if (spin) {
+            cls.push('hi-icon-spin');
+        }
+
+        if (className) {
+            cls.push(className);
+        }
+
+        return (
+            <span {...extra} className={cls.join(' ')}>
+                {render(svgProps)}
+            </span>
+        );
+    };
+}