Icon generator

[jszczypk]

Describe your suggested feature

Hi,

Please consider creatingt icon generator combining simple icons with additional signs.

By simple icons I mean icons like "folder", "map", "airplane" and by additional signs "-clock", "-lock-open", "-lock", "-check".
Those two shapes can be combined programmatically giving plenty of additional icons: "filter-lock-open", "bicycle-clock"

It can be done easily by applying to main shape with mask depending on secondary shape and then adding path with secondary shape in that place.

Best regards,
Janusz

[mririgoyen]

It can be done easily

Go for it! 😄 It's actually not as easy as you'd think! Definitely would consider a PR.

This is on our radar as something we'd like to offer in the future. However, it's pretty far out on the roadmap.

[jszczypk]

Sorry, but I can't build an interface that would fit your website.

Otherwise here is beehive-outline-arrow-right.svg:
https://codepen.io/jszczypk/pen/zYLMpzP

(async function(iconId) {
  const url = `https://raw.githubusercontent.com/Templarian/MaterialDesign/master/svg/${iconId}.svg`;

  const response = await fetch(url);
  const icon = await response.text();

  const arrowRight = `<mask id="mask">
<rect x="0" y="0" width="24" height="24" fill="white" />
<circle cx="18.5" cy="18" r="5.5" fill="black"/>
</mask>
<path d="M19,21V19H15V17H19V15L22,18L19,21Z" />
`;
  
  const svg = icon.replace(
  /(\/>)(\n?<\/svg>)/m,
  `mask="url(#mask)"$1${arrowRight}$2`
);

  console.log(svg);
  document.write(svg);

})('beehive-outline');

It assumes that there is just single element that should be masked.

[mririgoyen]

Appreciate the code sample, but the mask route wouldn't be the direction we'd want to go. All our icons should output one singular path, and that's the trickier part. Not impossible! We just haven't done the work to figure out how to do it yet.

[jszczypk]

Do I guess correctly this is because of requirement to convert SVG to WebFont?
The tool I have in mind is more for creating one-offs for some special purposes and or is an acceptable tradeoff.
Anyway I will look into it when possible. So far I had seen this:
http://snapsvg.io/docs/#Element.getSubpath
http://snapsvg.io/docs/#Snap.path.intersection

Snap.path.intersection looks promising. Having all the intersections you just get some subpaths from both shapes and combine them together.

[mririgoyen]

Nope, it has to do with the fact that all our tooling operates off of the fact that a single icon can never have more than one path. Even as we plan for duo-tones, that simply would be two paths, but still no other elements.

Snap.svg was actually one of the libraries I have plans to start experimenting with, so it looks like we're on the same page. 😄