Skip to content

Serving from fonts.googleapis.com

Jump to bottom
Valentin Degenne edited this page Jan 17, 2024 · 6 revisions

The main idea is to convert the link in our final html to include only the icons we need. Here's an example using @web/rollup-plugin-html but you can use any tools you like for html transformation:

import {mdIcon, minifySymbolsLink} from 'rollup-plugin-md-icon';
import {rollupPluginHTML as html} from '@web/rollup-plugin-html';

export default {
  plugins: [
    mdIcon(),
    html({
      transformHtml: minifySymbolsLink
    })
  ]
}

Preventing too much requests during development

If you use Rollup in watch mode during development (rollup -cw), then using the configuration above will update the stylesheet link every time you add or remove icons. It means your browser will send a new request to googleapis.com servers to cache the new version. You can avoid that using an environment variable:

Make sure to serve all icons font during dev: index.html:

<head>
  <link
    id="symbols"
    rel="stylesheet"
    href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"
  />
</head>

Then in rollup.config.js:

import {mdIcon, minifySymbolsLink} from 'rollup-plugin-md-icon';
import {rollupPluginHTML as html} from '@web/rollup-plugin-html';

const DEV = process.env.NODE_ENV == 'DEV';

export default {
  plugins: [
    mdIcon(),
    html({
      transformHtml: (html) => {
        return DEV ? html : minifySymbolsLink(html);
      },
    }),
  ],
};

Now you can have a peace of mind dev'ing with NODE_ENV=DEV rollup -cw and building with rollup -c

Clone this wiki locally