Allow svgo's prefixIds plugin to use filenames

[tremby]

See https://github.com/svg/svgo/blob/master/plugins/prefixIds.js#L137

This looks to me like there's some way to pass a data structure "extra" to SVGO, which can contain the SVG's filename. This would then be used to prefix IDs in the SVG, sidestepping problems with duplicate IDs in inline SVGs.

Would it be possible to have SVGR populate this, so that this plugin can be used in this way?

[gregberge]

Yeah I think we have to do it!

[tremby]

I gave the new version a try but unfortunately this isn't working for me as expected.

I've added some trace logs to node_modules/svgo/plugins/prefixIds.js so I can see what's happening, and in extra I'm just getting {input: 'string'} for each SVG.

From looking at the svgr source, that therefore looks like the state has no filePath. Why might htis be?

I'm using the svgo/webpack, if that makes a difference. I'm loading SVGs like so:

import { ReactComponent as LinkIcon } from '@svgr/webpack!images/link.svg'

[gregberge]

Actually the filename is not passed when used with Webpack. I don't know if we have access to it, probably not always. Anyway there is still a fix to do in @svgr/webpack.

[tremby]

Hope there's a way to do it!

[gersomvg]

I'm doing this as a workaround now (to prevent duplicate ids):

const _ = require('lodash');
const svgPrefix = {};
svgPrefix.toString = () => `${_.uniqueId()}_`;

---

svgoConfig: {
    plugins: [
        { cleanupIDs: { prefix: svgPrefix } },
    ],
}

[gregberge]

Follow up #188