dify

dify/web/app/components/base/svg/index.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import SVGBtn from '.'
+
+const SvgToggleDemo = () => {
+  const [isSVG, setIsSVG] = useState(false)
+
+  return (
+    <div className="flex w-full max-w-xs flex-col items-center gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">SVG toggle</p>
+      <SVGBtn isSVG={isSVG} setIsSVG={setIsSVG} />
+      <span className="text-xs text-text-secondary">
+        Mode: <code className="rounded bg-background-default px-2 py-1 text-[11px]">{isSVG ? 'SVG' : 'PNG'}</code>
+      </span>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/General/SVGBtn',
+  component: SvgToggleDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Small toggle used in icon pickers to switch between SVG and bitmap assets.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SvgToggleDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}

dify/web/app/components/base/svg/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import s from './style.module.css'
+import ActionButton from '../action-button'
+import cn from '@/utils/classnames'
+
+type ISVGBtnProps = {
+  isSVG: boolean
+  setIsSVG: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const SVGBtn = ({
+  isSVG,
+  setIsSVG,
+}: ISVGBtnProps) => {
+  return (
+    <ActionButton onClick={() => { setIsSVG(prevIsSVG => !prevIsSVG) }}>
+      <div className={cn('h-4 w-4', isSVG ? s.svgIconed : s.svgIcon)}></div>
+    </ActionButton>
+  )
+}
+
+export default SVGBtn

dify/web/app/components/base/svg/style.module.css

@@ -0,0 +1,11 @@
+.svgIcon {
+  background-image: url(~@/app/components/develop/secret-key/assets/svg.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.svgIconed {
+  background-image: url(~@/app/components/develop/secret-key/assets/svged.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}