search

OfficeDev / microsoft-teams-ui-component-library

Component library enhanced experiences styled for use in Microsoft Teams custom applications.
MIT License
127 stars 30 forks source link

Adding more Northstar Icons or being able to inject Custom Icons. #62

Closed bxav closed 3 years ago

bxav commented 3 years ago

I'm playing around with the library but I'm quickly limited by the Icon Component. It would be great to have some more other standard icons on it. 

  switch (icon) {
    case "Add":
      iconElement = <AddIcon outline />;
      break;
    // Example the calendar Icon  
    case "Calendar":
      iconElement = <CalendarIcon outline />;
      break;

Or just to be able to inject an icon component in the config of a list or the board. Something like:

 rows: {
      r4: {
        c1: "Whatever",
        actions: {
          edit: { title: "Edit", icon: "Edit" },
          duplicate: { title: "Duplicate", icon: <DuplicateIcon outline /> }
        },
      },
    },
dvdzkwsk commented 3 years ago

100% agreed. I threw together a PR for this: https://github.com/OfficeDev/microsoft-teams-ui-component-library/pull/63

Edit: Since I hastily added my personal opinion: after talking it over with some of the core developers on the team, we're still debating best implementation for this. While it's trivial to accept an arbitrary React element as an icon, one of the primary goals of this library is to encourage consistency across Teams apps and supporting userland elements circumvents that. That said, we are at a minimum using this as an opportunity to figure out how to make as much of the (if not the entire) Fluent UI icon library accessible. I'd recommend checking out the comments in the referenced PR for more details.

thure commented 3 years ago

Apologies for the long delay, but we've arrived at an implementation that doesn't change this library's API that makes all Fluent UI icons available: #69.