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 always been puzzled by the fact that programming languages such as C++, Python, C, and others seem to be stuck in the realm of the command line. When building websites, I can easily use HTML, CSS, and PHP to quickly create both the logic and inte ...
As I work on my shopping cart project in Visual Studio 2017, I've encountered some issues while using Vue.js for front-end development and MySQL for the back end. Specifically, when attempting to run the application, I am seeing the following errors p ...
Recently, I came across a useful jQuery tutorial called "jQuery for Absolute Beginners: Day 8". In this tutorial, there is an interesting code snippet that caught my attention: $(function() { $('.wrap').hover(function() { $(this).childre ...
Currently, I am working on a CSS userstyle project. The issue that I am facing is the inability to make modifications to images in buttons coded within the html of a web page: <button type="submit" class="btn btn-default"><img alt="Ico-plus" src= ...
After installing the foundation gem version 5.5.2.1, I encountered an error when starting the application: Showing /home/user/Scrivania/sites/store/app/views/layouts/application.html.erb where line #9 raised: Incompatible units: 'rem' and &apos ...
I am brand new to the world of UI design. I am encountering an issue with a static HTML page. (Please note that we are not utilizing any JavaScript frameworks in my project. Please provide assistance using pure JavaScript code) What I would like to achie ...
When using Zend2 navigation from an array passed in Zend\Navigation\Navigation, everything works smoothly if child items are opened on parent item mouse hover. However, undesirable actions occur when they are opened on mouse click, as the user is ...
While working on a project in VueJS, I've noticed that whenever I add a new class to an HTML tag, it displays as class="..." This is something that bothers me, and I'm not sure if it's due to a recent extension I installed or if i ...
I'm working on a Vue code that dynamically creates a menu using v-for, with each element requiring a different method when clicked. Here's what I have so far: <span v-for="(menuItem, index) in menuItems" :key="index"> ...
When viewing my webpage on mobile, the video background does not fit the screen properly (it fits in landscape orientation). Here is the video tag I am using: <video autoPlay loop muted playsInline className='absolute w-full h- ...
I am currently working on a store.js file import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const mutations = { increment: state => state.count++, Changeloading(state, status) { state.loading = status }, Cha ...
Check out the menu at this link: http://fiddle.jshell.net/V88c6/8/show/ To view the complete jsfiddle, click here: http://jsfiddle.net/V88c6/8/ Here is the HTML code: <div id="head_1"> <div class="inner"> <div class="column ...
I've come across a piece of code that utilizes an unfamiliar selector that I can't seem to figure out: $("div[tag=" + someVariable + "]").css("display", "block"); From what I gather, the selector is searching for a div element with an attribute ...
Currently, I am developing a Vue.js application using version 2.6.14. The app consists of a hierarchical list of topics with the ability to have nested child topics. To render these nested topics, I am employing a recursive component. Within each topic ob ...
Check out my fiddle here: https://jsfiddle.net/oed1k6m7/. It contains two td elements inside the thead. thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; } The code above only makes the first row fixed. How can I make b ...
How can kendo components like grids and charts be styled in the best possible way while following recommended practices? My current methods of styling them are: 1 : Utilizing ng deep, host, however these approaches have been deprecated and are not consi ...
In my React project, I have a container called "answers-container" with multiple buttons inside it, laid out using flexbox with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded. However, I'm facing an issu ...
Check out this code snippet: <template v-if="isTag(field, '')"> {{ getItemValue(item, field) ? getItemValue(item, field) : '–'; }} </template> An issue has been identified with the above code: Er ...
I am working with a Bootstrap Form that contains checkboxes. One specific scenario involves a large number of options to choose from. Currently, these options are displayed in a single long list, which can make it difficult for users to read and select the ...
Figured out how to make labels float above form input fields when focused, but struggling with keeping them floating when text is entered and field is unfocused. Been searching for CSS examples online, but none seem to clarify how to achieve the desired e ...