How do we import Bolt, DescriptionLabel, Link, FlexLayout, etc for the Icon component?

monday Apps & Developers
,
1

Trying to run this code:

I am unable to import Bolt, DescriptionLabel, etc. What are the import statements for these components?

3

Hi again!

Great question, the import statements for those icons will need to be something along the lines of:

import Bolt from "monday-ui-react-core/dist/icons/DoubleCheck";

I did not see a “DescriptionLabel” icon though-- if you want to attach a screenshot of what the label you’re looking for is, I can also provide the import statement for you!

4 
<FlexLayout className="main-icon-story">
  <div className="single-icon-wrapper" style={{ color: "var(--primary-color)" }}>
    <Icon iconType={Icon.type.SVG} icon={Bolt} iconLabel="my bolt svg icon" clickable iconSize={16} />
  </div>
  <DescriptionLabel>SVG Icon</DescriptionLabel>
</FlexLayout>
<FlexLayout className="main-icon-story">
  <div className="single-icon-wrapper" style={{ color: "var(--color-egg_yolk)" }}>
    <Icon iconType={Icon.type.ICON_FONT} iconLabel="my font awesome start icon" icon="fa fa-star" clickable />
  </div>
  <DescriptionLabel>Font Icon</DescriptionLabel>
</FlexLayout>
<FlexLayout className="main-icon-story">
  <div className="single-icon-wrapper">
    <CustomSvgIcon
      src="https://cdn.worldvectorlogo.com/logos/monday-1.svg"
      clickable
      className="icon-story-custom-icon"
    />
  </div>
  <DescriptionLabel className="icon-story-inline-style">
    Custom SVG Icon -{" "}
    <Link
      componentClassName={"icon-story-link"}
      href="https://github.com/gilbarbara/react-inlinesvg"
      text="react-inlinesvg"
    />
  </DescriptionLabel>
</FlexLayout>

The code is taken directly from the link above. So don’t know how to import DescriptionLabel or Link.

5

Hi @iateadonut!

For the tags you mentioned, they’re actually React tags and would require you to install the necessary packages in order to use them.

However, depending on how you’re looking to use them, you may not even want to include all of these components. For instance, I believe you may only need the Icon component that is explained in this guide here: React Icon Component - Material UI.

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.