@lobehub/icons 1.0.0 → 1.1.0

package/es/Wenxin/components/Color.js

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["size", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '1em' : _ref$size,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
+    height: size,
+    ref: ref,
+    style: _objectSpread({
+      flex: 'none',
+      lineHeight: 1
+    }, style),
+    viewBox: "0 0 24 24",
+    width: size,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsxs("linearGradient", {
+        id: "a",
+        x1: "9.155%",
+        x2: "90.531%",
+        y1: "75.177%",
+        y2: "25.028%",
+        children: [/*#__PURE__*/_jsx("stop", {
+          offset: "0%",
+          stopColor: "#0A51C3"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "100%",
+          stopColor: "#23A4FB"
+        })]
+      })
+    }), /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "nonzero",
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M11.32 1.176a1.4 1.4 0 011.36 0l8.64 4.843c.421.234.68.67.68 1.141v9.68c0 .472-.259.908-.68 1.143l-8.64 4.84a1.4 1.4 0 01-1.36 0l-8.64-4.84A1.31 1.31 0 012 16.84V7.159c0-.471.259-.907.68-1.142l8.64-4.84zm7.42 13.839V8.227L12.002 12 12 19.551l6.059-3.394a1.31 1.31 0 00.68-1.142zM12.68 4.833a1.393 1.393 0 00-1.36 0L5.944 7.846c-.421.235-.68.67-.68 1.142v6.027c0 .47.259.905.68 1.142l2.795 1.566V11.09a1.546 1.546 0 00.221.79 1.527 1.527 0 01-.216-.834l.004-.094.02-.15.018-.084.017-.062.039-.117.062-.142.035-.065.081-.13.094-.122.084-.091.08-.075.125-.1.071-.048.134-.076 5.87-3.29-2.796-1.566z",
+        fill: "url(#a)"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12 11.088c0-.875-.73-1.584-1.631-1.584a1.66 1.66 0 00-.855.237c-.027.016-.055.033-.08.05a2.361 2.361 0 00-.123.093c-.022.02-.045.038-.066.059l-.048.045-.063.067c-.014.016-.028.031-.04.048a2.303 2.303 0 00-.094.125l-.042.069a1.7 1.7 0 00-.07.13l-.036.081a.764.764 0 00-.022.06c-.01.03-.02.058-.028.087l-.017.062a.883.883 0 00-.03.16c-.002.025-.007.05-.008.074a1.527 1.527 0 00.213.929c.302.508.85.792 1.414.792.277 0 .558-.068.814-.212l.815-.457v-.914L12 11.088z",
+        fill: "#012F8D"
+      })]
+    })]
+  }));
+});
+export default Icon;

package/es/Wenxin/components/Combine.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type FlexboxProps } from 'react-layout-kit';
+export interface CombineProps extends FlexboxProps {
+    size?: number;
+    type?: 'color' | 'mono';
+}
+declare const Combine: import("react").NamedExoticComponent<CombineProps>;
+export default Combine;

package/es/Wenxin/components/Combine.js

@@ -0,0 +1,34 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "size"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { SPACE_MULTIPLE, TEXT_MULTIPLE } from "../style";
+import Color from "./Color";
+import Mono from "./Mono";
+import Text from "./Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Combine = /*#__PURE__*/memo(function (_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'mono' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var Icon = type === 'color' ? Color : Mono;
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    flex: 'none',
+    gap: size * SPACE_MULTIPLE,
+    horizontal: true
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      size: size
+    }), /*#__PURE__*/_jsx(Text, {
+      size: size * TEXT_MULTIPLE
+    })]
+  }));
+});
+export default Combine;

package/es/Wenxin/components/Mono.d.ts

@@ -0,0 +1,3 @@
+import type { IconType } from "../../types";
+declare const Icon: IconType;
+export default Icon;

package/es/Wenxin/components/Mono.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["size", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '1em' : _ref$size,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
+    fill: "currentColor",
+    fillRule: "evenodd",
+    height: size,
+    ref: ref,
+    style: _objectSpread({
+      flex: 'none',
+      lineHeight: 1
+    }, style),
+    viewBox: "0 0 24 24",
+    width: size,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsxs("linearGradient", {
+        id: "a",
+        x1: "9.155%",
+        x2: "90.531%",
+        y1: "75.177%",
+        y2: "25.028%",
+        children: [/*#__PURE__*/_jsx("stop", {
+          offset: "0%",
+          stopColor: "#0A51C3"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "100%",
+          stopColor: "#23A4FB"
+        })]
+      })
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M11.32 1.176a1.4 1.4 0 011.36 0l8.64 4.843c.421.234.68.67.68 1.141v9.68c0 .472-.259.908-.68 1.143l-8.64 4.84a1.4 1.4 0 01-1.36 0l-8.64-4.84A1.31 1.31 0 012 16.84V7.159c0-.471.259-.907.68-1.142l8.64-4.84zm7.42 13.839V8.227L12.002 12 12 19.551l6.059-3.394a1.31 1.31 0 00.68-1.142zM12.68 4.833a1.393 1.393 0 00-1.36 0L5.944 7.846c-.421.235-.68.67-.68 1.142v6.027c0 .47.259.905.68 1.142l2.795 1.566V11.09a1.546 1.546 0 00.221.79 1.527 1.527 0 01-.216-.834l.004-.094.02-.15.018-.084.017-.062.039-.117.062-.142.035-.065.081-.13.094-.122.084-.091.08-.075.125-.1.071-.048.134-.076 5.87-3.29-2.796-1.566z"
+    })]
+  }));
+});
+export default Icon;

package/es/Wenxin/components/Text.d.ts

@@ -0,0 +1,3 @@
+import type { IconType } from "../../types";
+declare const Icon: IconType;
+export default Icon;

package/es/Wenxin/components/Text.js

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["size", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '1em' : _ref$size,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({
+    fill: "currentColor",
+    fillRule: "evenodd",
+    height: size,
+    ref: ref,
+    style: _objectSpread({
+      flex: 'none',
+      lineHeight: 1,
+      width: 'fit-content'
+    }, style),
+    viewBox: "0 0 47 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M14.205 2.235H10.59v1.878H2.149v2.28H4.75c1.415 4.332 3.262 7.642 5.478 10.077C8.038 17.998 5.307 19.063 2 19.635V22c3.878-.142 7.345-1.256 10.293-3.594 2.949 2.34 6.417 3.452 10.294 3.594v-2.365c-3.307-.572-6.038-1.637-8.229-3.165 2.217-2.435 4.064-5.745 5.478-10.076h2.75v-2.28h-8.382V2.234h.001zm-1.91 12.499c-2.137-2.165-3.541-4.958-4.26-8.339h8.522c-.718 3.38-2.123 6.174-4.26 8.339h-.002zm12.812-4.09c0 3.295-.491 7.58-.692 9.186h2.892c.227-1.867.67-5.916.67-9.186V6.173h-2.872v4.47h.002zm7.64-7.254v14.507c0 .804.436 1.377 1.396 1.377h1.244l6.023-.001v2.4h-7.202v-.026c-.338-.004-.74-.006-1.216-.006-2.554 0-3.313-.886-3.313-3.744V3.39h3.067zM43.89 6.06C44.453 9.666 45 14.418 45 19.275h-2.872c0-4.84-.582-9.655-1.153-13.213zM37.993 2c.36 2.315.733 5.556.733 9.034V16h-2.87v-4.967c0-3.5-.41-6.803-.774-9.034h2.911z"
+    })
+  }));
+});
+export default Icon;

package/es/Wenxin/index.d.ts

@@ -0,0 +1,15 @@
+import Avatar from './components/Avatar';
+import Color from './components/Color';
+import Combine from './components/Combine';
+import Mono from './components/Mono';
+import Text from './components/Text';
+type CompoundedComponent = typeof Mono & {
+    Avatar: typeof Avatar;
+    Color: typeof Color;
+    Combine: typeof Combine;
+    Mono: typeof Mono;
+    Text: typeof Text;
+    colorPrimary: string;
+};
+declare const Icons: CompoundedComponent;
+export default Icons;

package/es/Wenxin/index.js

@@ -0,0 +1,13 @@
+import Avatar from "./components/Avatar";
+import Color from "./components/Color";
+import Combine from "./components/Combine";
+import Mono from "./components/Mono";
+import Text from "./components/Text";
+import { COLOR_PRIMARY } from "./style";
+var Icons = Mono;
+Icons.Color = Color;
+Icons.Text = Text;
+Icons.Combine = Combine;
+Icons.Avatar = Avatar;
+Icons.colorPrimary = COLOR_PRIMARY;
+export default Icons;

package/es/Wenxin/style.d.ts

@@ -0,0 +1,3 @@
+export declare const TEXT_MULTIPLE = 0.75;
+export declare const SPACE_MULTIPLE = 0.2;
+export declare const COLOR_PRIMARY = "#167ADF";

package/es/Wenxin/style.js

@@ -0,0 +1,3 @@
+export var TEXT_MULTIPLE = 0.75;
+export var SPACE_MULTIPLE = 0.2;
+export var COLOR_PRIMARY = '#167ADF';

package/es/Zhipu/components/Avatar.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { type AvatarProps } from '@lobehub/ui';
-declare const Avatar: import("react").NamedExoticComponent<AvatarProps>;
+import { type IconAvatarProps } from "../../IconAvatar";
+declare const Avatar: import("react").NamedExoticComponent<IconAvatarProps>;
 export default Avatar;

package/es/Zhipu/components/Avatar.js

@@ -1,28 +1,30 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["size", "style"];
+var _excluded = ["size", "style", "background"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { Avatar as A } from '@lobehub/ui';
-import { readableColor } from 'polished';
 import { memo } from 'react';
+import IconAvatar from "../../IconAvatar";
 import { COLOR_PRIMARY } from "../style";
 import Mono from "./Mono";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Avatar = /*#__PURE__*/memo(function (_ref) {
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 64 : _ref$size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
     style = _ref.style,
+    background = _ref.background,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(A, _objectSpread({
-    avatar: /*#__PURE__*/_jsx(Mono, {
-      size: size * 0.75
-    }),
-    background: COLOR_PRIMARY,
+  var bg = background || COLOR_PRIMARY;
+  return /*#__PURE__*/_jsx(IconAvatar, _objectSpread(_objectSpread({
+    background: bg,
     size: size,
     style: _objectSpread({
-      color: readableColor(COLOR_PRIMARY)
+      color: '#fff'
     }, style)
-  }, rest));
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(Mono, {
+      size: size * 0.75
+    })
+  }));
 });
 export default Avatar;

package/es/Zhipu/components/Combine.js

@@ -13,9 +13,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Combine = /*#__PURE__*/memo(function (_ref) {
   var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'color' : _ref$type,
+    type = _ref$type === void 0 ? 'mono' : _ref$type,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 64 : _ref$size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var Icon = type === 'color' ? Color : Mono;
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({

package/es/Zhipu/components/Text.js

@@ -17,7 +17,8 @@ var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref,
     style: _objectSpread({
       flex: 'none',
-      lineHeight: 1
+      lineHeight: 1,
+      width: 'fit-content'
     }, style),
     viewBox: "0 0 86 24",
     xmlns: "http://www.w3.org/2000/svg"

package/es/Zhipu/index.d.ts

@@ -1,6 +1,15 @@
-export { default as Avatar } from './components/Avatar';
-export { default as Color } from './components/Color';
-export { default as Combine } from './components/Combine';
-export { default as Mono } from './components/Mono';
-export { default as Text } from './components/Text';
-export { COLOR_PRIMARY as colorPrimary } from './style';
+import Avatar from './components/Avatar';
+import Color from './components/Color';
+import Combine from './components/Combine';
+import Mono from './components/Mono';
+import Text from './components/Text';
+type CompoundedComponent = typeof Mono & {
+    Avatar: typeof Avatar;
+    Color: typeof Color;
+    Combine: typeof Combine;
+    Mono: typeof Mono;
+    Text: typeof Text;
+    colorPrimary: string;
+};
+declare const Icons: CompoundedComponent;
+export default Icons;

package/es/Zhipu/index.js

@@ -1,6 +1,13 @@
-export { default as Avatar } from "./components/Avatar";
-export { default as Color } from "./components/Color";
-export { default as Combine } from "./components/Combine";
-export { default as Mono } from "./components/Mono";
-export { default as Text } from "./components/Text";
-export { COLOR_PRIMARY as colorPrimary } from "./style";
+import Avatar from "./components/Avatar";
+import Color from "./components/Color";
+import Combine from "./components/Combine";
+import Mono from "./components/Mono";
+import Text from "./components/Text";
+import { COLOR_PRIMARY } from "./style";
+var Icons = Mono;
+Icons.Color = Color;
+Icons.Text = Text;
+Icons.Combine = Combine;
+Icons.Avatar = Avatar;
+Icons.colorPrimary = COLOR_PRIMARY;
+export default Icons;

package/es/components/ColorPreview/index.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { CopyButton } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    cx = _ref.cx;
+  return {
+    btn: cx('copy-button', css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        top: 4px;\n        right: 4px;\n        opacity: 0;\n      "])))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      flex: none;\n\n      width: 98px;\n      height: 98px;\n\n      font-family: ", ";\n      line-height: 1;\n\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n\n      &:hover {\n        .copy-button {\n          opacity: 1;\n        }\n      }\n    "])), token.fontFamilyCode, token.colorBgContainer, token.colorBorder, token.borderRadius)
+  };
+});
+var IconPreview = /*#__PURE__*/memo(function (_ref2) {
+  var color = _ref2.color;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    className: styles.container,
+    justify: 'center',
+    style: {
+      background: color
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        color: '#fff'
+      },
+      children: color
+    }), /*#__PURE__*/_jsx(CopyButton, {
+      className: styles.btn,
+      content: color
+    })]
+  });
+});
+export default IconPreview;

package/es/{Editor/Preview.d.ts → components/Editor/Color.d.ts}

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { type SvgoConfig } from './svgo';
 interface PreviewProps {
-    config?: SvgoConfig;
     svg: string;
     title: string;
+    viewbox: string;
 }
 declare const Preview: import("react").NamedExoticComponent<PreviewProps>;
 export default Preview;

package/es/components/Editor/Color.js

@@ -0,0 +1,47 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { Highlighter } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    code: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      pre {\n        padding: 8px !important;\n      }\n\n      code {\n        font-size: 12px;\n        text-wrap: initial;\n      }\n    "])))
+  };
+});
+var Preview = /*#__PURE__*/memo(function (_ref2) {
+  var svg = _ref2.svg,
+    title = _ref2.title,
+    viewbox = _ref2.viewbox;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    flex: 'none',
+    gap: 16,
+    style: {
+      position: 'relative',
+      width: '100%'
+    },
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      gap: 8,
+      horizontal: true,
+      children: /*#__PURE__*/_jsx("h2", {
+        style: {
+          lineHeight: 1,
+          margin: 0
+        },
+        children: title
+      })
+    }), /*#__PURE__*/_jsx(Highlighter, {
+      className: styles.code,
+      language: 'tsx',
+      type: 'ghost',
+      children: "import { forwardRef } from 'react';\nimport type { IconType } from '@/types';\n\nconst Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {\n  return (\n    <svg\n      height={size}\n      ref={ref}\n      style={{ flex: 'none', lineHeight: 1, ...style }}\n      viewBox=\"".concat(viewbox, "\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...rest}\n    >\n      ").concat(svg, "\n    </svg>\n  );\n});\n\nexport default Icon;\n")
+    })]
+  });
+});
+export default Preview;

package/es/components/Editor/Mono.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface PreviewProps {
+    svg: string;
+    title: string;
+    viewbox: string;
+}
+declare const Preview: import("react").NamedExoticComponent<PreviewProps>;
+export default Preview;

package/es/components/Editor/Mono.js

@@ -0,0 +1,47 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { Highlighter } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    code: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      pre {\n        padding: 8px !important;\n      }\n\n      code {\n        font-size: 12px;\n        text-wrap: initial;\n      }\n    "])))
+  };
+});
+var Preview = /*#__PURE__*/memo(function (_ref2) {
+  var svg = _ref2.svg,
+    title = _ref2.title,
+    viewbox = _ref2.viewbox;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    flex: 'none',
+    gap: 16,
+    style: {
+      position: 'relative',
+      width: '100%'
+    },
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      gap: 8,
+      horizontal: true,
+      children: /*#__PURE__*/_jsx("h2", {
+        style: {
+          lineHeight: 1,
+          margin: 0
+        },
+        children: title
+      })
+    }), /*#__PURE__*/_jsx(Highlighter, {
+      className: styles.code,
+      language: 'tsx',
+      type: 'ghost',
+      children: "import { forwardRef } from 'react';\nimport type { IconType } from '@/types';\n\nconst Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {\n  return (\n    <svg\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      height={size}\n      ref={ref}\n      style={{ flex: 'none', lineHeight: 1, ...style }}\n      viewBox=\"".concat(viewbox, "\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...rest}\n    >\n      ").concat(svg, "\n    </svg>\n  );\n});\n\nexport default Icon;\n")
+    })]
+  });
+});
+export default Preview;

package/es/components/Editor/Preview.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface PreviewProps {
+    precent?: string;
+    svg: string;
+    title: string;
+}
+declare const Preview: import("react").ForwardRefExoticComponent<PreviewProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Preview;

package/es/components/Editor/Preview.js

@@ -0,0 +1,57 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { Highlighter, Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import IconPreview from "../IconPreview";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    code: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      flex: 1;\n      height: 96px;\n\n      pre {\n        padding: 8px !important;\n      }\n\n      code {\n        font-size: 12px;\n        text-wrap: initial;\n      }\n    "])))
+  };
+});
+var Preview = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var svg = _ref2.svg,
+    title = _ref2.title,
+    precent = _ref2.precent;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    flex: 'none',
+    gap: 16,
+    style: {
+      position: 'relative',
+      width: '100%'
+    },
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      gap: 8,
+      horizontal: true,
+      children: [/*#__PURE__*/_jsx("h2", {
+        style: {
+          lineHeight: 1,
+          margin: 0
+        },
+        children: title
+      }), precent && /*#__PURE__*/_jsx(Tag, {
+        children: precent
+      })]
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      gap: 8,
+      horizontal: true,
+      ref: ref,
+      children: [/*#__PURE__*/_jsx(IconPreview, {
+        children: svg
+      }), /*#__PURE__*/_jsx(Highlighter, {
+        className: styles.code,
+        language: 'tsx',
+        type: 'ghost',
+        children: svg
+      })]
+    })]
+  });
+});
+export default Preview;