I've been searching through all other solutions, and semantic seems to be working corr

Semantic UI icon fonts displayed as squares about breko-hub HOT 2 CLOSED

tomatau commented on July 24, 2024

Semantic UI icon fonts displayed as squares

from breko-hub.

Comments (2)

tomatau commented on July 24, 2024

If you open the body.css file that's generated in your browser and then search for @font-face you'll maybe see something like this:

@font-face {
  font-family: 'Icons';
  src: url(/8e3c7f5520f5ae906c6cf6d7f3ddcd19.eot);
  src: url(/8e3c7f5520f5ae906c6cf6d7f3ddcd19.eot?#iefix) format('embedded-opentype'), url(/0ab54153eeeca0ce03978cc463b257f7.woff2) format('woff2'), url(/faff92145777a3cbaf8e7367b4807987.woff) format('woff'), url(/b87b9ba532ace76ae9f6edfe9f72ded2.ttf) format('truetype'), url("<svg xmlns=\"http://www.w3.org/2000/svg\"><defs><font id=\"fontawesome-free\" horiz-adv-x=\"640\"><font-face font-family=\"Font Awesome 5 Free\" units-per-em=\"512\" ascent=\"448\" descent=\"64\" font-weight=\"900\" font-sty...

You can see that the Icons are trying to use the svg which is being loaded as svg markup instead of a url.

So you can change the webpack.base.config to use base64 strings for svgs like this:

{
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader',
        options: { limit: 10000, mimetype: 'image/svg+xml' },
      },

In the past I've wanted to support both types of svg import so done things along these lines:

      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        include: [ /semantic-ui/ ],
        loader: 'url-loader',
        options: { limit: 10000, mimetype: 'image/svg+xml' },
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        exclude: [ /semantic-ui/ ],
        use: [
          {
            loader: 'svg-inline-loader',
            options: { removeTags: false, removeSVGTagAttrs: false },
          }, {
            loader: 'svgo-loader',
            options: svgoConfig,
          },
        ],
      },