Skip to content

Instantly share code, notes, and snippets.

@OllyHodgson
Created July 31, 2020 22:48
Show Gist options
  • Save OllyHodgson/cde066c54468e620c5ce6329c558f371 to your computer and use it in GitHub Desktop.
Save OllyHodgson/cde066c54468e620c5ce6329c558f371 to your computer and use it in GitHub Desktop.
React component to use the Bootstrap 5 Icons in sprite form
import React from "react";
import classnames from "classnames";
import Icons from "bootstrap-icons/bootstrap-icons.svg";
const Icon = ({
className,
iconName,
height = "1rem",
width = "1rem",
label,
}) => {
const iconHref = `${Icons}#${iconName}`;
return (
<>
<svg
className={classnames("bi", `bi-${iconName}`, className)}
width={width}
height={height}
fill="currentColor"
role="img"
focusable="false"
>
<use xlinkHref={iconHref} />
</svg>
{label && <span className="sr-only">{label}</span>}
</>
);
};
export default Icon;
@JoshuaRamirez
Copy link

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment