Issues with IDs about vue-awesome HOT 5 CLOSED

ids are intentionally replaced because the same component can be included in a single page multiple times. If you want to use id, just pass them directly in your template, eg. <v-icon id="whatever" name="flag"/>.

from vue-awesome.

ah right, ok id works on the root, forgot I had my own wrapper around that icon component.

But still a bit weird with the id rewrites, I mean if the ids are being arbitrarily rewritten to some counter, it's not something that can really be referenced in any consistent way, might as well just remove them all together in that case.

Although I feel they should be left alone, up to the dev to decide what should be an id/class and then dealing with the consequences of having duplicates.

For instance the examples here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin

Where the "begin" attribute is given an id reference to a previous animation. There are work arounds with timers for this that I can use, but was kind of nice to just reference them like begin="second.end".

from vue-awesome.

Just to add, this could very easily be fixed by just being able to add an id during a register (or removing the id replacement all together).

icon.js

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

var id1 = Math.random().toString(36).replace(/[^a-z]+/g, '');
var id2 = Math.random().toString(36).replace(/[^a-z]+/g, '');

Icon.register({
  'my/icon/here': {
    width: 24,
    height: 24,
    id: id1, 
    raw: '/* some animation svg here... */'
  }
});

Then in the raw code we can use our ids as we like for animations. This will work for local animations, but continually creates issues without being able to have the root one set.

Also, I've tried doing some wrapper like <g id="myidhere"> but this then gets overridden :-(

from vue-awesome.

You can use class instead of id to apply animations. IMO using ids on reusable components is definitely not a good idea.

from vue-awesome.

Yes, I've tried class, and it's not working.

"IMO using ids on reusable components is definitely not a good idea."

Exactly, that's your opinion, you shouldn't force that on other developers, since they may have other scenarios.

The point I'm trying to make is that it's completely solvable.

1. The id rewrite is just arbitrary and does absolutely nothing anyway, it's just overhead really.
2. Give the ability to add an "id" that gets attached to the svg element.

Anyway, it's your package, I'll just roll my own or find something else ;-)

from vue-awesome.