I'm struggling to change the color of an existing static SVG image. Here's the code I have:
<img class="icon-shop" src="@/assets/icon-shop.svg"/>
<style>
.icon-shop {
width: 32px;
fill: orange;
stroke: orange;
}
</style>
Although I found a solution using the filter attribute, it feels overly complicated.
filter: invert(35%) sepia(36%) saturate(7009%) hue-rotate(2deg)
brightness(104%) contrast(88%);
To customize the sample, simply change the fill color to "YOUR COLOR". You can easily modify any SVG by editing the code using a text editor.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="red" stroke="none">
<path d="M212 2613 c-128 -45 -197 -230 -142 -376 26 -70 122 -200 188 -255
39 -33 219 -160 962 -678 41 -28 104 -67 140 -85 58 -30 74 -34 145 -34 74 0
85 3 150 39 39 21 165 104 280 185 116 81 341 239 502 350 217 151 310 221
361 275 108 114 152 208 153 328 1 119 -63 215 -171 253 -37 13 -209 15 -1284
14 -1087 0 -1246 -2 -1284 -16z"/>
<path d="M50 1228 c0 -745 -2 -723 72 -798 22 -23 58 -50 81 -61 40 -18 87
-19 1297 -19 l1255 0 50 24 c55 25 105 76 132 134 16 34 18 95 21 705 2 367 0
667 -3 667 -3 0 -34 -24 -69 -54 -36 -30 -106 -83 -158 -117 -160 -107 -596
-411 -753 -523 -304 -219 -447 -257 -656 -175 -88 36 -129 62 -546 355 -142
99 -337 234 -433 300 -96 65 -200 143 -232 173 l-58 53 0 -664z"/>
</g>
</svg>I've encountered an issue with my hidden menu nav bar. The hamburger and close buttons only work once. Should I organize the events within a function and call it at the end, or perhaps use a loop for the button events? It's worth noting that I d ...
<v-card :style="{ textAlign: 'left' }" class="basic-card pa-6" :class="{ 'small-padding': !$vuetify.breakpoint.xl }" elevation="0" flat :height="windowHeight - 104 + 'px&ap ...
I am using two methods called forceOpenSettings() and forceCloseSettings() to control the opening and closing of a collapsible section. These methods function properly when tested individually. However, I need them to be triggered based on a specific condi ...
Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...
I have a table of users that I am currently rendering, and my goal is to highlight the entire row only for the current user. My initial thought was to use a computed property to achieve this, but I seem to be facing some difficulties in making it work. I ...
Could someone please provide me with a short code example of an XML file that includes both a DTD and CSS styles all in one file? Just need one element as an example. I'm new to XML and can't seem to find any examples with both XML and CSS comb ...
I'm in the process of developing a website with a video banner set to fixed positioning in the background, and a div that has absolute positioning covering part of the video on the bottom half. However, I've encountered an issue - when I add this ...
I have a set of four divs that display numbers, and I want to show the corresponding words below each number. Despite trying to use the p tag with white-space: pre; in CSS, I have not been successful: #c { padding-top: 30px; padding-bottom: 30px; } ...
Tips for overlaying a button on each HTML element with the class WSEDIT. My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element. Below ...
Using vuejs 2.0 alongside webpack, vue-router (in history mode - SPA site), and vuex on the webpack dev server with hot module loading has been smooth sailing so far. The current setup involves about 10 routes mapped out to components. However, I'm n ...
If you have three buttons and want to change the background color when clicked, for example, clicking on the red button should turn the background color red. However, there is an important detail here: if you click on one button and then another, the old c ...
Exploring the optimal way to utilize refs in conjunction with TypeScript and the Options API is my current focus. The documentation demonstrates it as shown below, but without TS. With TypeScript, however, they only cover its usage with Composition API. E ...
I'm working on a login section and looking to add a unique feature: When a user selects the email or password input field, I want the button text to change to 'LOGIN'. If neither input field is selected, the text should display 'NOT A ...
After creating my divs in css and linking them to my index file, I encountered an issue when zooming out of the page. The images would shift to the left while the background remained centered. I needed help figuring out how to keep an image fixed on the pa ...
I have created 3 unique templates (DetailView, CardView, Column) for displaying content on a single page. Users can easily switch between these views. My goal is to display only one view at a time on the page. When the user switches views, I want to remov ...
I'm in the process of developing a chat application using Laravel and Pusher, but I've encountered an issue with broadcasting events to and from the Pusher endpoint. Despite trying various solutions found online, such as adding a CSRF token to m ...
In a project, I have 3 checkboxes that are interconnected and when one is clicked or checked, I want the others to be cleared while keeping the clicked checkbox checked. This behavior is similar to radio buttons but I cannot use radio buttons due to client ...
Looking to create a horizontal scroll layout using CSS and floats? Here's my attempt, but I'm not getting the desired result. Flexbox isn't an option as it needs to be supported on IE. Take a look at my code and point out where I might have ...
I am currently working on developing a sleek messaging system and I have encountered an issue with the interface design. My project is built using Materialize, however, I am open to tweaking it with custom CSS if necessary. The layout consists of a list of ...
I need help with a code that involves a button triggering a popup, and I want the user to be able to close the popup by clicking outside of it when it's open. My goal is to assign the method "Close()" to the event listener that detects clicks outside ...