Blueprint: How to use custom svg's as blueprint icons?

[tnrich]

I saw this issue - https://github.com/palantir/blueprint/issues/2066 - and it makes it seem like user specified custom icons are now supported.

I read the docs but it was unclear as to how to use a custom svg in a blueprint component.

Is this how that's supposed to work?

<Button icon={<svg />}/>

I was also curious about using our own svg icon font with blueprint buttons/icons/etc. Is there a recommended way to do that?

Thanks!

cc @tgreen7 @tiffanydai

[giladgray]

Yep you got it, pass a custom element to the icon prop. Can slap Classes.ICON on it for minimal layout styles but I'm honestly not sure exactly how that'll work. Use 16x16 icons for best results.

More details on using custom icons would be appreciated, happy to add a section to the docs with your findings!

[tnrich]

Cool @giladgray we'll play around with it and figure out a solution that works best for it and let you know what it is.

[llorca]

sweet, feel free to create a new issue if something comes up 👍

[tnrich]

Here's how we use custom icons now in our app:

<Icon icon={customIcons.flaskIcon}/> 

or 

<Button icon={customIcons.flaskIcon} text="Button with Flask Icon" />

Here's how we're make the underlying icons:

const ptIconWrapper = (path, viewboxDefault = 24) => {
  return (
    <svg
      className="pt-icon"
      version="1.1"
      id="Capa_1"
      xmlns="http://www.w3.org/2000/svg"
      x="0px"
      y="0px"
      width="16px"
      height="16px"
      viewBox={`0 0 ${viewboxDefault} ${viewboxDefault}`}
    >
      {path}
    </svg>
  );
};

export const flaskIcon = ptIconWrapper(
  <path
    d="M42.504,39.673L29.88,16.027V4.021h1.249c0.553,0,1-0.447,1-1V1c0-0.552-0.447-1-1-1H29.88H17.042h-1.144
c-0.553,0-1,0.448-1,1v2.021c0,0.553,0.447,1,1,1h1.144v12.007L5.421,39.57C2.451,44.226,4.519,48,10.042,48h27.999
C43.563,48,45.561,44.271,42.504,39.673z M20.628,17.798l0.413-0.837v-0.933V4.021h4.839v12.007v1.001l0.471,0.883l5.41,10.132
h-16.19L20.628,17.798z"
  />,
  48
); 

Hope that helps others :)

[tdehollain]

For those using @tnrich's ptIconWrapper, the svg needs to be wrapped in a span with the class 'bp3-icon'. Otherwise the icon doesn't get the right margins and fill colors (light/dark mode, selected/unselected,...):

<span className="bp3-icon">
  <svg>
      ...
  </svg>
</span>