@996-design/996-icons 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT LICENSE
+
+Copyright (c) 2018-present Ant UED, https://xtech.antfin.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,24 @@
+# Upstream attribution
+
+The React icon runtime, declarations, generated icon entry points, and
+distribution artifacts are derived from `@ant-design/icons` 6.3.2.
+
+- Upstream: https://github.com/ant-design/ant-design-icons/tree/6.3.2
+- License: MIT. See `LICENSE`.
+
+Local changes are limited to the package identity, workspace scripts, package
+metadata, and rewriting color/icon-definition dependencies to
+`@996-design/996-colors` and `@996-design/996-icons-svg`. The React icon
+implementation and generated icon set are otherwise kept aligned with the
+published 6.3.2 package.
+
+## Mechanical parity source
+
+- npm tarball: https://registry.npmjs.org/@ant-design/icons/-/icons-6.3.2.tgz
+- Integrity: `sha512-B6O5a5XJ4wjtNOfZejXYwHW5zvKV5gYkjGf11dHGLEbKn0ABDGndo41+gfIiXyTFhvESj4XTotuud33mUFid0g==`
+- Guard inventory: 5,152 published runtime/source files; sorted-path SHA-256
+  `5f1d7f34949aed8c5777b7f2afdff07528d4b162bccaa3a6b498391544cf569c`.
+
+The locally generated `dist/es/` tree, package metadata, `node_modules`, and
+caches are excluded from source parity. Every inventoried file is compared
+after only the declared package-namespace rewrite.

package/README.md

@@ -0,0 +1,28 @@
+# 996 Design Icons for React
+
+Tree-shakeable React icon components with ESM, CJS, per-icon and declaration entry points.
+
+## Install
+
+```sh
+pnpm add @996-design/996-icons
+```
+
+## Use
+
+```tsx
+import { SearchOutlined, SettingOutlined } from "@996-design/996-icons";
+
+export function Actions() {
+  return (
+    <span aria-label="Workspace actions">
+      <SearchOutlined />
+      <SettingOutlined />
+    </span>
+  );
+}
+```
+
+## License
+
+MIT. See `LICENSE` and `NOTICE.md` for license and source attribution.

package/dist/es/colorUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_TWOTONE_COLOR: string;
+export declare function getSecondaryColor(primaryColor: string): string;

package/dist/es/colorUtils.js

@@ -0,0 +1,7 @@
+import { blue } from '@996-design/996-colors';
+import generateColor from '@996-design/996-colors/es/generate';
+export const DEFAULT_TWOTONE_COLOR = blue.primary;
+export function getSecondaryColor(primaryColor) {
+  // choose the second color
+  return generateColor(primaryColor)[0];
+}

package/dist/es/components/AntdIcon.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { IconDefinition } from '@996-design/996-icons-svg/lib/types';
+import type { IconBaseProps } from './Icon';
+import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
+import type { TwoToneColor } from './twoTonePrimaryColor';
+export interface AntdIconProps extends IconBaseProps {
+    twoToneColor?: TwoToneColor;
+}
+export interface IconComponentProps extends AntdIconProps {
+    icon: IconDefinition;
+}
+interface IconBaseComponent<Props> extends React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSpanElement>> {
+    getTwoToneColor: typeof getTwoToneColor;
+    setTwoToneColor: typeof setTwoToneColor;
+}
+declare const Icon: IconBaseComponent<IconComponentProps>;
+export default Icon;

package/dist/es/components/AntdIcon.js

@@ -0,0 +1,68 @@
+'use client';
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import { clsx } from 'clsx';
+import Context from "./Context.js";
+import ReactIcon from "./IconBaseTwoTone.js";
+import { getTwoToneColor, setTwoToneColor } from "./twoTonePrimaryColor.js";
+import { DEFAULT_TWOTONE_COLOR } from "../colorUtils.js";
+import { normalizeTwoToneColors } from "../utils.js";
+// Initial setting
+// should move it to antd main repo?
+setTwoToneColor(DEFAULT_TWOTONE_COLOR);
+
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-488848720
+
+const Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    // affect outter <i>...</i>
+    className,
+    // affect inner <svg>...</svg>
+    icon,
+    spin,
+    rotate,
+    tabIndex,
+    onClick,
+    // other
+    twoToneColor,
+    ...restProps
+  } = props;
+  const {
+    prefixCls = 'anticon',
+    rootClassName
+  } = React.useContext(Context);
+  const classString = clsx(rootClassName, prefixCls, {
+    [`${prefixCls}-${icon.name}`]: !!icon.name,
+    [`${prefixCls}-spin`]: !!spin || icon.name === 'loading'
+  }, className);
+  let iconTabIndex = tabIndex;
+  if (iconTabIndex === undefined && onClick) {
+    iconTabIndex = -1;
+  }
+  const svgStyle = rotate ? {
+    msTransform: `rotate(${rotate}deg)`,
+    transform: `rotate(${rotate}deg)`
+  } : undefined;
+  const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    role: "img",
+    "aria-label": icon.name
+  }, restProps, {
+    ref: ref,
+    tabIndex: iconTabIndex,
+    onClick: onClick,
+    className: classString
+  }), /*#__PURE__*/React.createElement(ReactIcon, {
+    icon: icon,
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor,
+    style: svgStyle
+  }));
+});
+Icon.getTwoToneColor = getTwoToneColor;
+Icon.setTwoToneColor = setTwoToneColor;
+if (process.env.NODE_ENV !== 'production') {
+  Icon.displayName = 'AntdIcon';
+}
+export default Icon;

package/dist/es/components/AntdIconLight.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { IconDefinition } from '@996-design/996-icons-svg/lib/types';
+import type { IconBaseProps } from './Icon';
+import type { TwoToneColor } from './twoTonePrimaryColor';
+export interface AntdIconProps extends IconBaseProps {
+    twoToneColor?: TwoToneColor;
+}
+export interface IconComponentProps extends AntdIconProps {
+    icon: IconDefinition;
+}
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconComponentProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export default Icon;

package/dist/es/components/AntdIconLight.js

@@ -0,0 +1,54 @@
+'use client';
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import { clsx } from 'clsx';
+import Context from "./Context.js";
+import ReactIcon from "./IconBase.js";
+const Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    // affect outter <i>...</i>
+    className,
+    // affect inner <svg>...</svg>
+    icon,
+    spin,
+    rotate,
+    tabIndex,
+    onClick,
+    twoToneColor: _twoToneColor,
+    // other
+    ...restProps
+  } = props;
+  const {
+    prefixCls = 'anticon',
+    rootClassName
+  } = React.useContext(Context);
+  const classString = clsx(rootClassName, prefixCls, {
+    [`${prefixCls}-${icon.name}`]: !!icon.name,
+    [`${prefixCls}-spin`]: !!spin || icon.name === 'loading'
+  }, className);
+  let iconTabIndex = tabIndex;
+  if (iconTabIndex === undefined && onClick) {
+    iconTabIndex = -1;
+  }
+  const svgStyle = rotate ? {
+    msTransform: `rotate(${rotate}deg)`,
+    transform: `rotate(${rotate}deg)`
+  } : undefined;
+  return /*#__PURE__*/React.createElement("span", _extends({
+    role: "img",
+    "aria-label": icon.name
+  }, restProps, {
+    ref: ref,
+    tabIndex: iconTabIndex,
+    onClick: onClick,
+    className: classString
+  }), /*#__PURE__*/React.createElement(ReactIcon, {
+    icon: icon,
+    style: svgStyle
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Icon.displayName = 'AntdIcon';
+}
+export default Icon;

package/dist/es/components/Context.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface IconContextProps {
+    prefixCls?: string;
+    rootClassName?: string;
+    csp?: {
+        nonce?: string;
+    };
+    layer?: string;
+    zeroRuntime?: boolean;
+}
+declare const IconContext: import("react").Context<IconContextProps>;
+export default IconContext;

package/dist/es/components/Context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const IconContext = /*#__PURE__*/createContext({});
+export default IconContext;

package/dist/es/components/Icon.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
+    spin?: boolean;
+    rotate?: number;
+}
+export interface CustomIconComponentProps {
+    width: string | number;
+    height: string | number;
+    fill?: string;
+    viewBox?: string;
+    className?: string;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export interface IconComponentProps extends IconBaseProps {
+    viewBox?: string;
+    component?: React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>> | React.ForwardRefExoticComponent<CustomIconComponentProps>;
+    ariaLabel?: React.AriaAttributes['aria-label'];
+}
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconComponentProps, 'ref'> & React.RefAttributes<HTMLSpanElement>>;
+export default Icon;

package/dist/es/components/Icon.js

@@ -0,0 +1,82 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+// Seems this is used for iconFont
+import * as React from 'react';
+import { clsx } from 'clsx';
+import Context from "./Context.js";
+import { svgBaseProps, warning, useInsertStyles } from "../renderUtils.js";
+import { useComposeRef } from "../refUtils.js";
+const Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    // affect outter <i>...</i>
+    className,
+    // affect inner <svg>...</svg>
+    component: Component,
+    color,
+    viewBox,
+    spin,
+    rotate,
+    tabIndex,
+    onClick,
+    // children
+    children,
+    ...restProps
+  } = props;
+  const iconRef = React.useRef(null);
+  const mergedRef = useComposeRef(iconRef, ref);
+  warning(Boolean(Component || children), 'Should have `component` prop or `children`.');
+  useInsertStyles(iconRef);
+  const {
+    prefixCls = 'anticon',
+    rootClassName
+  } = React.useContext(Context);
+  const classString = clsx(rootClassName, prefixCls, {
+    [`${prefixCls}-spin`]: !!spin && !!Component
+  }, className);
+  const svgClassString = clsx({
+    [`${prefixCls}-spin`]: !!spin
+  });
+  const svgStyle = rotate ? {
+    msTransform: `rotate(${rotate}deg)`,
+    transform: `rotate(${rotate}deg)`
+  } : undefined;
+  const innerSvgProps = {
+    ...svgBaseProps,
+    color,
+    className: svgClassString,
+    style: svgStyle,
+    viewBox
+  };
+  if (!viewBox) {
+    delete innerSvgProps.viewBox;
+  }
+
+  // component > children
+  const renderInnerNode = () => {
+    if (Component) {
+      return /*#__PURE__*/React.createElement(Component, innerSvgProps, children);
+    }
+    if (children) {
+      warning(Boolean(viewBox) || React.Children.count(children) === 1 && /*#__PURE__*/React.isValidElement(children) && React.Children.only(children).type === 'use', 'Make sure that you provide correct `viewBox`' + ' prop (default `0 0 1024 1024`) to the icon.');
+      return /*#__PURE__*/React.createElement("svg", _extends({}, innerSvgProps, {
+        viewBox: viewBox
+      }), children);
+    }
+    return null;
+  };
+  let iconTabIndex = tabIndex;
+  if (iconTabIndex === undefined && onClick) {
+    iconTabIndex = -1;
+  }
+  return /*#__PURE__*/React.createElement("span", _extends({
+    role: "img"
+  }, restProps, {
+    ref: mergedRef,
+    tabIndex: iconTabIndex,
+    onClick: onClick,
+    className: classString
+  }), renderInnerNode());
+});
+if (process.env.NODE_ENV !== 'production') {
+  Icon.displayName = 'AntdIcon';
+}
+export default Icon;

package/dist/es/components/IconBase.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { IconDefinition } from '@996-design/996-icons-svg/lib/types';
+export interface IconProps {
+    icon: IconDefinition;
+    className?: string;
+    onClick?: React.MouseEventHandler<SVGSVGElement>;
+    style?: React.CSSProperties;
+    primaryColor?: string;
+    secondaryColor?: string;
+    focusable?: string;
+}
+declare const IconBase: React.FC<IconProps>;
+export default IconBase;

package/dist/es/components/IconBase.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { generate, isIconDefinition, warning, useInsertStyles } from "../renderUtils.js";
+const IconBase = props => {
+  const {
+    icon,
+    className,
+    onClick,
+    style,
+    primaryColor: _primaryColor,
+    secondaryColor: _secondaryColor,
+    ...restProps
+  } = props;
+  const svgRef = React.useRef(null);
+  useInsertStyles(svgRef);
+  warning(isIconDefinition(icon), `icon should be icon definiton, but got ${icon}`);
+  if (!isIconDefinition(icon)) {
+    return null;
+  }
+  const target = icon;
+  return generate(target.icon, `svg-${target.name}`, {
+    className,
+    onClick,
+    style,
+    'data-icon': target.name,
+    width: '1em',
+    height: '1em',
+    fill: 'currentColor',
+    'aria-hidden': 'true',
+    ...restProps,
+    ref: svgRef
+  });
+};
+IconBase.displayName = 'IconReact';
+export default IconBase;

package/dist/es/components/IconBaseTwoTone.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { IconProps } from './IconBase';
+export interface TwoToneColorPaletteSetter {
+    primaryColor: string;
+    secondaryColor?: string;
+}
+export interface TwoToneColorPalette extends TwoToneColorPaletteSetter {
+    calculated?: boolean;
+}
+declare function setTwoToneColors({ primaryColor, secondaryColor }: TwoToneColorPaletteSetter): void;
+declare function getTwoToneColors(): TwoToneColorPalette;
+interface IconBaseTwoToneComponent<P> extends React.FC<P> {
+    getTwoToneColors: typeof getTwoToneColors;
+    setTwoToneColors: typeof setTwoToneColors;
+}
+declare const IconBaseTwoTone: IconBaseTwoToneComponent<IconProps>;
+export default IconBaseTwoTone;

package/dist/es/components/IconBaseTwoTone.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { getSecondaryColor } from "../colorUtils.js";
+import { generate, isIconDefinition, warning, useInsertStyles } from "../renderUtils.js";
+const twoToneColorPalette = {
+  primaryColor: '#333',
+  secondaryColor: '#E6E6E6',
+  calculated: false
+};
+function setTwoToneColors({
+  primaryColor,
+  secondaryColor
+}) {
+  twoToneColorPalette.primaryColor = primaryColor;
+  twoToneColorPalette.secondaryColor = secondaryColor || getSecondaryColor(primaryColor);
+  twoToneColorPalette.calculated = !!secondaryColor;
+}
+function getTwoToneColors() {
+  return {
+    ...twoToneColorPalette
+  };
+}
+const IconBaseTwoTone = props => {
+  const {
+    icon,
+    className,
+    onClick,
+    style,
+    primaryColor,
+    secondaryColor,
+    ...restProps
+  } = props;
+  const svgRef = React.useRef(null);
+  let colors = twoToneColorPalette;
+  if (primaryColor) {
+    colors = {
+      primaryColor,
+      secondaryColor: secondaryColor || getSecondaryColor(primaryColor)
+    };
+  }
+  useInsertStyles(svgRef);
+  warning(isIconDefinition(icon), `icon should be icon definiton, but got ${icon}`);
+  if (!isIconDefinition(icon)) {
+    return null;
+  }
+  let target = icon;
+  if (target && typeof target.icon === 'function') {
+    target = {
+      ...target,
+      icon: target.icon(colors.primaryColor, colors.secondaryColor)
+    };
+  }
+  return generate(target.icon, `svg-${target.name}`, {
+    className,
+    onClick,
+    style,
+    'data-icon': target.name,
+    width: '1em',
+    height: '1em',
+    fill: 'currentColor',
+    'aria-hidden': 'true',
+    ...restProps,
+    ref: svgRef
+  });
+};
+IconBaseTwoTone.displayName = 'IconReact';
+IconBaseTwoTone.getTwoToneColors = getTwoToneColors;
+IconBaseTwoTone.setTwoToneColors = setTwoToneColors;
+export default IconBaseTwoTone;

package/dist/es/components/IconFont.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { IconBaseProps } from './Icon';
+export interface CustomIconOptions {
+    scriptUrl?: string | string[];
+    extraCommonProps?: Record<string, unknown>;
+}
+export interface IconFontProps<T extends string = string> extends IconBaseProps {
+    type: T;
+}
+export default function create<T extends string = string>(options?: CustomIconOptions): React.FC<IconFontProps<T>>;

package/dist/es/components/IconFont.js

@@ -0,0 +1,69 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import Icon from "./Icon.js";
+const customCache = new Set();
+function isValidCustomScriptUrl(scriptUrl) {
+  return Boolean(typeof scriptUrl === 'string' && scriptUrl.length && !customCache.has(scriptUrl));
+}
+function createScriptUrlElements(scriptUrls, index = 0) {
+  const currentScriptUrl = scriptUrls[index];
+  if (isValidCustomScriptUrl(currentScriptUrl)) {
+    const script = document.createElement('script');
+    script.setAttribute('src', currentScriptUrl);
+    script.setAttribute('data-namespace', currentScriptUrl);
+    if (scriptUrls.length > index + 1) {
+      script.onload = () => {
+        createScriptUrlElements(scriptUrls, index + 1);
+      };
+      script.onerror = () => {
+        createScriptUrlElements(scriptUrls, index + 1);
+      };
+    }
+    customCache.add(currentScriptUrl);
+    document.body.appendChild(script);
+  }
+}
+export default function create(options = {}) {
+  const {
+    scriptUrl,
+    extraCommonProps = {}
+  } = options;
+
+  /**
+   * DOM API required.
+   * Make sure in browser environment.
+   * The Custom Icon will create a <script/>
+   * that loads SVG symbols and insert the SVG Element into the document body.
+   */
+  if (scriptUrl && typeof document !== 'undefined' && typeof window !== 'undefined' && typeof document.createElement === 'function') {
+    if (Array.isArray(scriptUrl)) {
+      // 因为iconfont资源会把svg插入before，所以前加载相同type会覆盖后加载，为了数组覆盖顺序，倒叙插入
+      createScriptUrlElements(scriptUrl.reverse());
+    } else {
+      createScriptUrlElements([scriptUrl]);
+    }
+  }
+  const Iconfont = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const {
+      type,
+      children,
+      ...restProps
+    } = props;
+
+    // children > type
+    let content = null;
+    if (props.type) {
+      content = /*#__PURE__*/React.createElement("use", {
+        xlinkHref: `#${type}`
+      });
+    }
+    if (children) {
+      content = children;
+    }
+    return /*#__PURE__*/React.createElement(Icon, _extends({}, extraCommonProps, restProps, {
+      ref: ref
+    }), content);
+  });
+  Iconfont.displayName = 'Iconfont';
+  return Iconfont;
+}

package/dist/es/components/twoTonePrimaryColor.d.ts

@@ -0,0 +1,3 @@
+export type TwoToneColor = string | [string, string];
+export declare function setTwoToneColor(twoToneColor: TwoToneColor): void;
+export declare function getTwoToneColor(): TwoToneColor;

package/dist/es/components/twoTonePrimaryColor.js

@@ -0,0 +1,16 @@
+import ReactIcon from "./IconBaseTwoTone.js";
+import { normalizeTwoToneColors } from "../utils.js";
+export function setTwoToneColor(twoToneColor) {
+  const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
+  return ReactIcon.setTwoToneColors({
+    primaryColor,
+    secondaryColor
+  });
+}
+export function getTwoToneColor() {
+  const colors = ReactIcon.getTwoToneColors();
+  if (!colors.calculated) {
+    return colors.primaryColor;
+  }
+  return [colors.primaryColor, colors.secondaryColor];
+}

package/dist/es/cssUtils.d.ts

@@ -0,0 +1,11 @@
+export declare function updateCSS(css: string, key: string, originOption?: {
+    attachTo?: Element | ShadowRoot;
+    csp?: {
+        nonce?: string;
+    };
+    mark?: string;
+    prepend?: boolean | 'queue';
+    priority?: number;
+}): HTMLStyleElement;
+export declare function getShadowRoot(ele: HTMLElement | null): ShadowRoot;
+export declare function warningOnce(valid: boolean, message: string): void;