How to import icons with the same name from different families?

[niuage]

Might not be an issue related directly to streamline, I'll let you be the judge of that, but maybe you can help me, as well as others with the same issue.

In a Rails 6 app, using webpack, I'm importing 2 icons with the same name from 2 different families:

import Bulb from '@streamlinehq/streamlinehq/img/streamline-light/work-office-companies/ideas-creativity/bulb.svg'
import BulbBold from '@streamlinehq/streamlinehq/img/streamline-bold/work-office-companies/ideas-creativity/bulb.svg'

Since they're imported, webpack compiles them:

media/ideas-creativity/bulb-7f5217db.svg   503 bytes               [emitted]              
media/ideas-creativity/bulb-faf84d2c.svg    1.16 KiB                  [emitted]             

but... as you can see, they have the same name, which prevents me from using them with image_pack_tag.

[cbrwizard]

Hmm, this seems to be a platform related issue. We do have lots of images which are called the same in several families, because some families are just variations of the same images (eg streamline light/bold/regular). So we're not interested in changing names for the same images. I hope you can find a solution for this. I'm not familiar with modern Rails (coded in it last time ±6 years ago), but maybe there is a way to use the whole import path in image_pack_tag?

[niuage]

You are right, it was a configuration "issue" with Webpacker (gem used by rails to configure webpack).

What I ended up doing was add a custom loader for streamline icons.

I'll leave it here, in case it ever helps anyone. Feel free to suggest improvements, I'm not a webpack expert yet ^^.

const { environment } = require('@rails/webpacker');
const { join } = require('path');

const streamlinehqIconRegexp = /.*@streamlinehq.*\.(svg)$/i;

const fileLoader = environment.loaders.get('file');
fileLoader.exclude = streamlinehqIconRegexp;

module.exports = {
  test: streamlinehqIconRegexp,
  use: [
    {
      loader: "file-loader",
      options: {
        name: (fullPath) => {
          let iconFamily = fullPath.match(/img\/streamline-([^\/]+)/)[1]

          if (iconFamily == "light")
            iconFamily = "";

          return join(
            "media/icons",
            iconFamily,
            "[name]-[hash:8].[ext]"
          );
        }
      },
    }
  ]
}