feat: add Plugin icon component and integrate it into the navigation operations

This commit is contained in:
yessenia
2026-02-09 16:37:19 +08:00
parent b9cd625c53
commit 984992d0fd
5 changed files with 82 additions and 3 deletions

View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.5 6.66675H17.5V15.8334H2.5V6.66675Z" stroke="#354052" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.16675 6.66659V3.33325H8.33341V6.66659" stroke="#354052" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.6667 6.66659V3.33325H15.8334V6.66659" stroke="#354052" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 509 B

View File

@ -0,0 +1,53 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "20",
"height": "20",
"viewBox": "0 0 20 20",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"d": "M2.5 6.66675H17.5V15.8334H2.5V6.66675Z",
"stroke": "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
"children": []
},
{
"type": "element",
"name": "path",
"attributes": {
"d": "M4.16675 6.66659V3.33325H8.33341V6.66659",
"stroke": "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
"children": []
},
{
"type": "element",
"name": "path",
"attributes": {
"d": "M11.6667 6.66659V3.33325H15.8334V6.66659",
"stroke": "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
"children": []
}
]
},
"name": "Plugin"
}

View File

@ -0,0 +1,20 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import type { IconData } from '@/app/components/base/icons/IconBase'
import * as React from 'react'
import IconBase from '@/app/components/base/icons/IconBase'
import data from './Plugin.json'
const Icon = (
{
ref,
...props
}: React.SVGProps<SVGSVGElement> & {
ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
},
) => <IconBase {...props} ref={ref} data={data as IconData} />
Icon.displayName = 'Plugin'
export default Icon

View File

@ -1,4 +1,5 @@
export { default as BoxSparkleFill } from './BoxSparkleFill'
export { default as LeftCorner } from './LeftCorner'
export { default as Playground } from './Playground'
export { default as Plugin } from './Plugin'
export { default as Trigger } from './Trigger'

View File

@ -1,12 +1,12 @@
'use client'
import { RiAddLine, RiBookOpenLine, RiGithubLine, RiPuzzle2Line } from '@remixicon/react'
import { RiAddLine, RiBookOpenLine, RiGithubLine } from '@remixicon/react'
import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import Badge from '@/app/components/base/badge'
import Button, { buttonVariants } from '@/app/components/base/button'
import { Playground } from '@/app/components/base/icons/src/vender/plugin'
import { Playground, Plugin } from '@/app/components/base/icons/src/vender/plugin'
import {
PortalToFollowElem,
PortalToFollowElemContent,
@ -99,7 +99,7 @@ export const CreationTypeTabs = ({ creationType: creationTypeProp }: CreationTyp
creationType === 'plugins' && 'bg-state-base-hover text-text-secondary',
)}
>
<RiPuzzle2Line className="h-4 w-4 shrink-0" />
<Plugin className="h-4 w-4 shrink-0" />
<span className="system-sm-medium hidden md:inline">
{t('plugins', { ns: 'plugin' })}
</span>