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

web/app/components/base/icons/assets/vender/plugin/playground.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6301 11.3333C11.6301 12.4379 10.7347 13.3333 9.63013 13.3333C8.52559 13.3333 7.63013 12.4379 7.63013 11.3333C7.63013 10.2287 8.52559 9.33325 9.63013 9.33325C10.7347 9.33325 11.6301 10.2287 11.6301 11.3333Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M3.1353 4.75464L6.67352 7.72353L2.33325 9.30327L3.1353 4.75464Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M9.79576 2.5L13.6595 3.53527L12.6242 7.399L8.7605 6.36371L9.79576 2.5Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

web/app/components/base/icons/src/vender/plugin/Playground.json

@@ -0,0 +1,50 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "16",
+      "height": "16",
+      "viewBox": "0 0 16 16",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M11.6301 11.3333C11.6301 12.4379 10.7347 13.3333 9.63013 13.3333C8.52559 13.3333 7.63013 12.4379 7.63013 11.3333C7.63013 10.2287 8.52559 9.33325 9.63013 9.33325C10.7347 9.33325 11.6301 10.2287 11.6301 11.3333Z",
+          "stroke": "currentColor",
+          "stroke-width": "1.5",
+          "stroke-linejoin": "round"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M3.1353 4.75464L6.67352 7.72353L2.33325 9.30327L3.1353 4.75464Z",
+          "stroke": "currentColor",
+          "stroke-width": "1.5",
+          "stroke-linejoin": "round"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M9.79576 2.5L13.6595 3.53527L12.6242 7.399L8.7605 6.36371L9.79576 2.5Z",
+          "stroke": "currentColor",
+          "stroke-width": "1.5",
+          "stroke-linejoin": "round"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "Playground"
+}

web/app/components/base/icons/src/vender/plugin/Playground.tsx

@@ -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 './Playground.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'Playground'
+
+export default Icon

web/app/components/base/icons/src/vender/plugin/index.ts

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

web/app/components/plugins/plugin-page/nav-operations.tsx

@@ -1,11 +1,12 @@
 'use client'
-import { RiAddLine, RiBookOpenLine, RiGithubLine, RiLayoutGridLine, RiPuzzle2Line } from '@remixicon/react'
+import { RiAddLine, RiBookOpenLine, RiGithubLine, RiPuzzle2Line } 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 {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -111,7 +112,7 @@ export const CreationTypeTabs = ({ creationType: creationTypeProp }: CreationTyp
           creationType === 'templates' && 'bg-state-base-hover text-text-secondary',
         )}
       >
-        <RiLayoutGridLine className="h-4 w-4 shrink-0" />
+        <Playground className="h-4 w-4 shrink-0" />
         <span className="system-sm-medium hidden md:inline">
           {t('templates', { ns: 'plugin' })}
         </span>