Discover the power of using SVG sprites in Vue JS for dynamic, visually appealing CSS background

Utilizing an SVG sprite file in a Vue JS HTML template is successful with the following setup:

<svg class="icon">
  <use xlink:href="~@/assets/images/icons.svg#edit"></use>
</svg>

The contents of the icons.svg file typically resemble the structure below:

<svg style="display: none;">
  <symbol id="edit" viewbox="0 0 15 15">
    <g>...</g>
  </symbol>
</svg>

However, attempting to utilize the same SVG fragment in a Vue CSS file as shown below leads to failure:

.edit-icon{
  background:url('~@/assets/images/icons.svg#edit') no-repeat;
  background-size: 15px 15px;
}

It seems that the browser can only locate the #edit symbol within HTML. Is there a method to employ this same SVG sprite approach in a CSS background?

cssvue.jssvg

Answer №1

Avoid using both ~ and @ in the css import statement.

.edit-icon{
  background:url('@/assets/images/icons.svg#edit') no-repeat;
  background-size: 15px 15px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I properly save a PNG image with alpha transparency to be compatible with IE6?

Seeking advice on saving a visually pleasing 1 or 8-bit PNG image that renders well in IE6. Open to suggestions on alternative methods as I have experience with Fireworks but exploring new options. Thank you in advance! ...

cssimageinternet-explorer-6pngalpha-transparency

Issue with Vue.js transition not working when used with a computed property

I'm currently in the process of developing a basic inventory management system that will feature multiple categories for the items, along with the ability to view all items at once. Switching from the 'all' category to the 'general&apo ...

vue.jsanimate.cssvuejs-transition

Using *ngIf to construct SVG icons in Angular 2 doesn't contribute to the DOM in any way

I am currently utilizing icoMoon to import a series of SVG icons. The structure of the html I'm trying to create using ngIf is as follows: <div class="contactIcon"> <svg class="icon icon-envelop"> <use xlink:href="symbol-d ...

javascriptsvgangularangular-ng-if

What is the best way to include an event listener within the `setup` function?

With the switch to vue3, the $on method has been deprecated. In order to add an event listener, it is now necessary to write it directly on the element itself. <transition name="fade" @after-enter="afterEnter"> <div>foo ...

vue.jsvuejs3

I seem to be having a problem with CSS and Flexbox sizing. Does anyone have an explanation for what might be

Hey there! I'm currently in the process of building a Netflix clone, and everything seems to be working well except for one issue with the layout. No matter how I adjust the width of the div containing the images, they just won't change size. I&a ...

cssreactjsflexboxcarouselnetflix

What is the process for incorporating elements into Particles.js within Nuxt 3?

Adding particles.js to my nuxt 3 project posed a challenge. I utilized https://github.com/Joepocalyptic/nuxt-particles, but unfortunately, whenever I added an element within <NuxtParticles>, the element did not show up. // app.vue <template> ...

vue.jsvuejs3nuxt.jsnuxtjs3particles.js

:last-child is effective, but :first-child is inefficient

I'm having trouble using CSS to hide the first .sku element within an aside that contains two of these elements. Strangely, the :last-child selector works just fine. Can anyone explain why this might be happening? Here's a link to the JSFiddle fo ...

csshtmlcss-selectors

Is there a way to alter visibility once a radio button has been selected?

I have a shape resembling a cube with 4 faces, all of which are currently visible. However, I would like to hide the other 3 faces when one face is showing. For example: I attempted setting the opacity of the other cube sides to 0 when the first radio but ...

javascripthtmlcss

Why isn't my Bootstrap navbar expanding properly?

I am facing an issue with my toggle menu where it is not dropping down as a solid black block but instead in the center transparent. How can I fix this to make it drop down as a solid block and be positioned to the left? I have a bootstrap navbar that I mo ...

htmlcssnavbar

Troubleshooting the issue of the background of element A not changing when hovering over element B, despite mouseleave not

Currently, I am attempting to modify the background of element A when mouseover event occurs on element B, and then revert it back to its original state upon mouseleave. It's worth noting that B is nested within A. Strangely, while the background colo ...

javascriptjqueryhtmlcss

Issue with IE failing to load a particular Stylesheet

Have you had a chance to view this live demonstration? My website has two different stylesheets, one specifically for Internet Explorer and another for regular browsers. Here's how they are set up in the header: <link rel="stylesheet" type="text/c ...

cssinternet-explorer

Implementing VueJs Vuetify Autocomplete feature with clickable hyperlinks

I am working with Vuetify and I want to create an autocomplete feature similar to the one on their official site. However, I am encountering some issues: The items value is not appearing in the return list and I am unsure how to display the links. Here i ...

vue.jsvuetify.js

Using Vue to pass an array of rules to a child component

Currently, I am passing a set of props called "propSet" to a child component. These props are computed and detect an 'edit mode' boolean that changes accordingly. The "propSet" defines the following form input props: color, filled, dense, outlin ...

javascriptvue.jsvuetify.js

"Despite using 'vertical-align: middle' on table cells, the alignment to the middle is not achieved when using AlphaImageLoader in IE6

I am currently working on aligning text within table cells that have a PNG Transparent background. To achieve this in IE6, I am using the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() method. However, I am facing an issue where the text is no ...

cssinternet-explorer-6vertical-alignment

The HTML drag and drop API is causing an issue where the `getData`

My website features a drag-and-drop functionality, and I'm utilizing the HTML drag-and-drop API to implement it. However, when I attempt to drag and drop an SVG image onto the canvas, it displays as undefined, and I would like the image to remain in t ...

vue.jsdrag-and-drop

Enable synchronized scrolling and a fixed/sticky header with splitpanes feature

Sandbox.vue <template> <v-container fluid> <Splitpanes class="default-theme" style="height: 400px" > <Pane v-for="i in 2" :key="i" > & ...

cssvuejs2

What might be the reason behind Chrome occasionally not updating the page when I resize the browser window?

Currently, I am in the process of developing a responsive design site prototype. Everything is going smoothly except for one peculiar issue that only seems to occur in Chrome. Sometimes, when expanding the window, the browser appears to get stuck between s ...

google-chromecsstwitter-bootstrapresponsive-design

Ways to secure a floating item onto a backdrop picture

Currently I am working on editing this page. When you hover over the cat, its eyes blink or two black dots randomly appear. My goal is to prevent the random blinking dots from appearing. I want to keep the hover object attached to the cat/background image ...

csshoverpositionbackground-imagemousehover

Unusual images emerge following certain elements in this unique gallery

Looking for some advice on my image gallery created using an ordered list. The issue I'm facing is that the images are not all the same size, causing the 4th and 7th images to disrupt the layout. I have come up with a solution by using: ...

htmlcss

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

I've utilized d3 to create a map. Its width is dynamically set based on the parent div's (with the id "map") width, and its height is calculated with a ratio of 5/9 in relation to the width. The viewBox attribute has been defined as "0 0 width he ...

javascriptjquerycsssvgd3.js