search

seiyable / vue-simple-svg

A simple Vue.js plugin that allows you to load a SVG image as an inline SVG with an access to change its fill colors
MIT License
80 stars 23 forks source link

Attributes proposal #5

Open shrpne opened 6 years ago

shrpne commented 6 years ago

Thank you for your great plugin, but I have some concerns with the current way of setting SVG attributes:

  1. It forces me to set attributes for every <simple-svg>, but often SVG in the file already have fine styled attributes
  2. I can't set other attributes, like opacity, stroke-width, stroke-linecap, stroke-dasharray and many more https://developer.mozilla.org/ru/docs/Web/SVG/Attribute

My suggestion to resolve these issues:

  1. Not to remove attributes from the SVG, unless it was specified in component props. If I specify width: '400px', width will be overridden. If I specify fill: 'none', fill will be set to 'none'. If I specify 'stroke-width': '', stroke-width will be removed.
  2. Pass an array of attributes in the united prop, like this: 
    <simple-svg
:filepath="'/PATH_/TO_/YOUR_/FILE.svg'"
:attrs="{
width: '400px',
height: '400px',
id: 'custom-id',
'stoke-width': '',
opacity: 0.4
}"
/>

Also, it will fix #4

seiyable commented 6 years ago

Hi shrpne, yes it totally makes sense. I'll be working on this this weekend, or you can give me a pull request. Thanks!

ayyoubjadoo commented 5 years ago

Hi, Please note that setting the fill and stroke props to none doesn't work as described, it's not drawing black but its still discarding the original fill and stroke styles in the svg itself.

The expected behavior is that when we don't provide these props or when we give them the value "none" the original stroke and fill styles in the SVG should be kept as is.

Nice plugin BTW and this issue must be fixed to make it perfect.

shrpne commented 5 years ago

'none' is a valid option for fill and should not be treated as undefined. I think to keep original style we should pass values like undefined or false. Also, you can check vue-inline-svg it works with attributes as expected.