CODEWITHSUNDEEP
vue.jsvuejs2
nexequ
nexequ

Reputation: 371

Vue call component inside background-image

I'm trying to call component as background-image in vue2.

I'm using vue-feather-icons-ssr and I can call it like:

<icon name="feather"></icon>

It renders icon as SVG.

Now I would like to render this component inside background-image, but actually all my methods didn't work.

Example how I would like it to work (pseudocode):

<div :style="{background-image: url(<icon name="feather"></icon>)}">test</div>

Upvotes: 0

Views: 485

Answers (1)

dr_barto
dr_barto

Reputation: 6065

You'll need to access the icon's SVG directly, not through the component. Assuming that you use webpack and npm, and your icon lib contains SVG data (i.e. it's not wrapping the images in JS files, like e.g. vue-awesome does): you can just write the relative path to the SVG file into the style, in which case you don't have to bind it (style instead of :style).

Upvotes: 2

Related Questions