update code thread

Author: softmarshmallow

figma-core/event-handlers/create-icon.ts

@@ -1,4 +1,3 @@
-import { NamedIconConfig } from "@reflect-ui/core";
 import { EK_CREATE_ICON, EK_ICON_DRAG_AND_DROPPED } from "@core/constant";
 import { PluginSdkService } from "@plugin-sdk/service";
 import { IconPlacement, renderSvgIcon } from "../reflect-render/icons.render";
@@ -7,7 +6,12 @@ import { addEventHandler } from "../code-thread";
 interface CreateIconProps {
   key: string;
   svg: string;
-  config: NamedIconConfig;
+  config: {
+    name: string;
+    size: number;
+    variant?: string;
+    package: string;
+  };
 }
 
 function createIcon(

figma-core/reflect-render/icons.render/index.ts

@@ -18,7 +18,7 @@ export function renderSvgIcon(
   data: string,
   color: Color = "#000000",
   placement: IconPlacement = "center",
-  config?: NamedIconConfig
+  config?: { size: number; name: string; package: string; variant?: string }
 ): FrameNode {
   console.log(`inserting icon with name ${name} and data ${data}`);
 
@@ -47,7 +47,7 @@ export function renderSvgIcon(
 
   // operate extra manipulation if config is available.
   if (config) {
-    const size = Number(config.default_size);
+    const size = Number(config.size);
     node.resize(size, size);
   }
 
@@ -62,14 +62,19 @@ export function renderSvgIcon(
 
 export function buildReflectIconNameForRender(
   name: string,
-  config: NamedIconConfig
+  config: { name: string; package: string; variant?: string }
 ): string {
-  if (config.host == "material") {
-    return `icons/mdi_${name}`;
-  } else if (config.host == "ant-design") {
-    return `icons/antd-${name}`;
-  } else {
-    return `icons/${name}`;
+  switch (config.package) {
+    case "material":
+      return `icons/mdi_${name}`;
+    case "ant-design":
+      return `icons/antd-${name}`;
+    case "radix-ui":
+      return `icons/radix-${name}`;
+    case "unicons":
+      return `icons/unicons-${name}`;
+    default:
+      return `icons/${name}`;
   }
 }
 

packages/app-icons-loader/icon-item.tsx

@@ -43,8 +43,12 @@ export function IconItem({ onClick, ...props }: IconItemProps) {
       const data = {
         key: name,
         svg: svg,
-        // TODO:
-        // config: config,
+        config: {
+          name: props.name,
+          variant: props.variant,
+          size: props.size,
+          package: props.package,
+        },
       };
       return data;
     } catch (_) {
@@ -73,7 +77,7 @@ export function IconItem({ onClick, ...props }: IconItemProps) {
   return (
     <Draggable customDataLoader={loadData} eventKey={EK_ICON_DRAG_AND_DROPPED}>
       <Tooltip
-        title={`${name} (${variant}) (${_package})`}
+        title={`${name} (${variant ?? "default"}) (${_package})`}
         placement="top"
         PopperProps={{
           popperOptions: {

packages/app-icons-loader/icons-loader.tsx

@@ -161,6 +161,7 @@ const Section = styled.div`
   .title {
     margin: 0;
     padding: 16px;
+    padding-right: 0;
     font-size: 12px;
     font-weight: normal;
     color: rgba(0, 0, 0, 0.54);

packages/app-icons-loader/resources.ts

@@ -97,8 +97,6 @@ export function useIcons({
 
   let result = Array.from(icons ?? []);
 
-  console.log(meta.filter((m) => m.package === "radix-ui"));
-
   // sort by package name
 
   const pkg_order = query