feat(web): use bg replace img

web/src/views/Workflow/components/Properties/VariableSelect.tsx

@@ -73,11 +73,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
         >
           {filterOption.nodeData?.icon && filterOption.nodeData?.name && (
             <>
-              <img
-                src={filterOption.nodeData.icon}
-                style={{ width: '12px', height: '12px', marginRight: '4px' }}
-                alt=""
-              />
+              <div className={`rb:size-3 rb:mr-1 rb:bg-cover ${filterOption.nodeData.icon}`} />
               {filterOption.nodeData.name}
               <span className="rb:text-[#DFE4ED] rb:mx-0.5">/</span>
             </>
@@ -111,11 +107,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
    */
   const groupedOptions = Object.entries(groupedSuggestions).map(([_nodeId, suggestions]) => ({
     label: <Flex align="center" gap={4}>
-      {suggestions[0].nodeData.icon && <img
-        src={suggestions[0].nodeData.icon}
-        className="rb:size-3"
-        alt=""
-      />}
+      {suggestions[0].nodeData.icon && <div className={`rb:size-3 ${suggestions[0].nodeData.icon}`} />}
       {suggestions[0].nodeData.name}
     </Flex>,
     options: suggestions.map(s => ({ 

web/src/views/Workflow/components/Properties/index.tsx

@@ -474,7 +474,7 @@ const Properties: FC<PropertiesProps> = ({
                     label: t(`workflow.${category.category}`),
                     options: category.nodes.filter(item => !['cycle-start', 'break'].includes(item.type)).map(node => ({
                       label: <div className="rb:flex rb:items-center rb:gap-2 rb:flex-1">
-                        <img src={node.icon} className="rb:size-3.5" />
+                        <div className={`rb:size-3.5 rb:bg-cover ${node.icon}`} />
                         <div className="rb:wrap-break-word rb:line-clamp-1">{t(`workflow.${node.type}`)}</div>
                       </div>,
                       value: node.type