Register from file

[ferndot]

First off, I really appreciate this library. It has been valuable to my work.

It would be really great if it supported registering icons from an SVG file. The current manual creation of paths and shapes is cumbersome and hard to update. Also, the raw option doesn't fit this need very well because it seems to only work with the contents of a layer, rather than the entire svg file.

[SBeator]

I also want to have this feature.
What's more, can we import some svg files and register them together?

@Justineo Do you have any plan to implement this feature?
I can help on this if you want.

[Justineo]

Hi, do you have a proposed usage for this feature?

[SBeator]

@Justineo The usage is like this:

We have some customized icons in our website from design. We need to register them before we can use them.

And our designer can give us some SVG files for these icons.

Now I am thinking if we can register the custom icons from the SVG files directly.

Then we can have these benefits:

1. We don't need to copy the content of the SVG file to JS file for registering.
2. We can just maintain the SVG files. So it can easily change the icons in future if needed.
3. We can easily preview the icons by just open the SVG files.

[Justineo]

I’m aware of your use case. What I ask earlier is about the proposed API. Currently it’s easy to achieve this by add some webpack loader or a custom script to automatically convert SVG files into JS modules without any modification on the runtime API.

[SBeator]

Agree, this is also what I want to do.
I am trying to set the webpack loader to import SVG files and register them. And of course I can implement that feature without change any of your API.

But I am still thinking if you can provide a formal way to do this, so that any other people (like me) can easily use the new feature and don't need to spend much time to think how to set the loader or write some custom script.

[ferndot]

For my use case, it would be great if something like this were implemented:

import Icon from 'vue-awesome/components/Icon'

Icon.register({
  'custom-icon': {
    file: 'path/to/icon.svg'
  }
})

[ghost]

@joshua-s Have you found any practical solution until now?

[Justineo]

import Icon from 'vue-awesome/components/Icon'

Icon.register({
  'custom-icon': {
    file: 'path/to/icon.svg'
  }
})

This is not possible without a build step (eg. webpack loader).

[ferndot]

@andreiscripcaru22 I have not, actually. I currently update the icons manually when things change.

[GregHattJr]

@joshua-s So you have custom SVG images that you import and then compile using Vue Awesome? I've been really really struggling to figure out how I can import a provided SVG and register it with Vue Awesome as an icon.

[ferndot]

@GregHattJr I've just been manually copying in the SVG code and using it like this section explains:
https://github.com/Justineo/vue-awesome#registering-custom-icons