Is there a way to batch register all my custom icons?

Developer Support
1

Is there away to batch register all my custom icons?

...
export const IconA = createIcon({
  displayName: 'IconA',
  viewBox: '0 0 32 32',
  d: "...",
})
export const IconB = createIcon({
  displayName: 'IconA',
  viewBox: '0 0 32 32',
  d: "...",
})
...

Or would I need to individually register them as seperate files:

//registerIconA.ts
import { 
  IconProps
 } from "@chakra-ui/react";
import { ComponentMeta } from "@plasmicapp/host/registerComponent";
import {
  getComponentNameAndImportMeta,
  getPlasmicComponentName,
} from "./utils";

export const iconAMeta: ComponentMeta<IconProps> = {
  ...getComponentNameAndImportMeta("IconA"),
  props: {
    viewBox: {
      type: "string",
      defaultValue: "0 0 24 24",
    },
    boxSize: {
      type: "string",
      defaultValue: "1em",
    },
    color: {
      type: "string",
      defaultValue: "currentColor",
    },
    focusable: {
      type: "boolean",
      defaultValue: false,
    },
    role: {
      type: "choice",
      options: [
        "presentation",
        "img"
      ],
    },
  },
}
2

One idea came to my mind is to make a wrapper component for all the icons, then use a prop to control which icon to render lol, another prop to control the styling (say outlined, filled, duo color etc)

Because on the other hand, having too many registered components will yield a very poor user experience scrolling through the list

3

Sounds perfect - a drop down list of available icons, maybe even limited to AllowedComponents when needed. Probably a little heady for me to work out, unless there is an example code I can follow.

4

I’m going to record a indept complete walkthrough video for you @political_magpie

5

Wonderful. Looking forward to it.

6

Exporting video

7

@political_magpie

8

9

OK - i’ll check it out now. Xmas all over again.

10

This is the most simple stupid way I can think of, @impressive_cardinal, do you have a good idea how I can “don’t repeat yourself” in the switch clauses?

11

You’re so modest :laughing:. I learnt a lot from this.
Will try apply to my Chakra UI icon set and Chakra custom icon set now.
Thx @verbal_sparrow

12

I’m glad that helps

13

Sorry being late to the party.

First of all, why would you like to create the icons from code side, and not import all of them directly into Plasmic project (from UI)? :thinking_face:

Second, @verbal_sparrow idea to create a wrapper to control svg props is a good idea no matter the direction you’re importing the icons. I don’t have a React component for that, but in Svelte I’m controlling overriding all the fill props from the svg using CSS.

This should work in React as well:

:global(svg) {
      width: inherit;
      height: inherit;
}

:global(svg *) {
  fill: currentColor;
}

Note: global is needed in svelte to control Child styling from the parent (or the opposite).

14

I’ll take a better look at this tomorrow. :sleeping:

15

Oh Hahahha @impressive_cardinal is right, you can directly import icons/avg to Plasmic, that’s the most efficient way, since Chakra doesnt provide many icons out of the box anyway

16

Do you mean import SVG files via Plasmic UI or import code based SVG icons? as the thread started with trying to import this prod’ code (which I think is called SVG sprites:

...
export const IconA = createIcon({
  displayName: 'IconA',
  viewBox: '0 0 32 32',
  d: "...",
})
export const IconB = createIcon({
  displayName: 'IconA',
  viewBox: '0 0 32 32',
  d: "...",
})
...

and I’m trying to add this to the approach laid out by Plasmic’s Chakra-ui package which currently has no icons (apart from an AccordionIcon)

17

Yes, I didn’t add Chakra Icons exactly because of the issues I mentioned above,

  1. They don’t offer variants of any kind
  2. They don’t look good
  3. There are too few of them, and don’t exhaust any use case
    So using regular svg icon will be 10 times more efficient and more elegant in this regard
18

Forget about SVG sprites, Chakra has a lot of useless redundant wrapper components, you need to distinguish which is actually worthy of porting to Plasmic, for example Chakra’s Stack, HStack, VStack, Grid, GridItem, Box, Container etc, firstly, they don’t offer any extra value to what Plasmic already have. Secondly, they are far worse than what Plasmic already have.

You have to know that components like these are meant to be used in a strict coding environment, they do add value there, but we are using Plasmic, we are way passed that dark age of soly text based coding

19

The production code uses SVG sprites for all custom icons with no variants, so although I can avoid the Chakra Icon wrapper, I’d still like to render these production icons in Plasmic.