Bulma plus Icons
Posted on 18 April, 2024
Further to the previous post about Bulma I'm nearly finished with the charity project, and decided to run a Lighthouse report.
To my (somewhat) surprise, not great news — performance score was in the 80s. There were a few reasons, but one in particular for today — I was using the Material Design Icons web-font and it really wasn't happy about that.
To be fair, their own docs say that it's recommended not to use the web-font, I was just being a bit lazy (or, maybe, trusting that Bulma would have dealt with this problem for me — spoiler alert, they haven't).
The problem with using the web-font is basically that you load every single icon regardless of how many of them you're using — I don't think it's that big a file, but certainly loading a few thousand icons when I'm using a handful of them seems a bit wasteful. So, what to do?
If you're using React
There's some provided helpers if using React; first we need to install two packages:
npm install @mdi/react @mdi/jsThen to use an icon, we need to make a couple of import statements in the relevant file; I'm still
using a much of the Bulma CSS as I can, so ends up with something like this:
// inside your JSX for the relevant component
// at the top, import the Icon component plus the icons you want to use
import Icon from "@mdi/react";
import { mdiEmail } from "@mdi/js"
const MyComponent = () => {
return (
...
// using a combination of Bulma class plus the provided object
// note that I'm using the bulma is-small class, but this doesn't
// have any impact on the Icon, so have to also use size={0.66},
// which has the same effect
<span className="icon is-small">
<Icon className="mdi" size={0.66} path={mdiEmail} />
</span>
...
)
}
export default MyComponent;What about 11ty?
(Or any project that isn't using a full-fat javascript framework, I guess)
I need to work this one out, but it looks as though the answer would be:
-
Individually download each icon you want as an SVG file (there's a download button on each icon's page)
-
Place that file in your project, presumably where it'll end up as being publicly accessible (for 11ty, add a passthrough rule)
-
Use an
imgtag to use the icon; guessing something like:
// inside your html/njk/liquid file
<span className="icon is-small">
<img src="path/to/email.svg"/>
</span>I need to try out that to see how it works, but it should be "about right"!
Implement this successfully reduced my CSS and (along with a couple other fixes) has my Lighthouse score somewhere around the 398 mark ... not perfect, but probably "good enough" for this one.
