Dynamic Fill Colors in SVG File Through Vue Components

I am currently developing a unique social media platform using VueJS 3.

For the design aspect, I incorporated Twitter's iconic logo saved as an .svg file, easily displayed using the <img /> tag. To modify its color, I utilized the fill="#fff" attribute within the <svg> tag. However, I encountered a challenge when wanting to utilize the .svg file in multiple locations and various colors.

My attempt to dynamically change the svg's color by assigning classes like fill-white, bg-white, and text-white to the <img /> tag proved to be ineffective.

The Current .svg File - Showing White Color

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" aria-hidden="true">
    <g>
        <path fill="#fff" d="M23.643 4.937c-... 1.7-1.477 2.323-2.41z"></path>
    </g>
</svg>

Img Tag Implementation

<img
 src="/twitter-bird.svg"
 draggable="false"
 class="w-52 lg:w-96 fill-white"
 alt="Twitter Bird"
/>

Attempt to Customize .svg File

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" aria-hidden="true">
    <g>
        <path fill="params(fill) #fff" d="M23.643 4.937c-... 1.7-1.477 2.323-2.41z"></path>
    </g>
</svg>

I am aware of the necessity to enable color modification for this svg file, but I am yet to discover the appropriate solution.

cssvue.jssvgvue-componentvuejs3

Answer №1

Creating a component from an SVG file and binding the fill to a prop:

const app = Vue.createApp({
  data() {
    return {
      colors: ['#8A2BE2', 'rgb(255,255,0)', '#008000'],
    };
  },
})
app.component('myImg', {
  template: `
    <svg height="40" viewBox="0 0 107.1 107.1" style="enable-background:new 0 0 107.1 107.1;" xml:space="preserve">
    <path :fill="color" d="M2.287,47.815l23.096,19.578L18.2,96.831c-1.411,5.491,4.648,9.998,9.575,6.901L53.55,87.813l25.774,15.916   c4.79,2.955,10.844-1.408,9.576-6.902l-7.184-29.435l23.099-19.579c4.363-3.661,2.111-10.844-3.662-11.267l-30.282-2.255   L59.464,6.266c-2.112-5.211-9.577-5.211-11.832,0L36.225,34.292L5.944,36.547C0.174,37.113-2.081,44.154,2.287,47.815z"/>
  </svg>
  `,
  props: ['color']
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="col in colors">
    <my-img :color="col"></my-img>
  </div>
</div>

Answer №2

const application = Vue.createApp({
  data() {
    return {
      palette: ['#8A2BE2', 'rgb(255,255,0)', '#008000'],
    };
  },
})
application.component('myImage', {
  template: `
    <svg height="40" viewBox="0 0 107.1 107.1" style="enable-background:new 0 0 107.1 107.1;" xml:space="preserve">
    <path :fill="color" d="M2.287,47.815l23.096,19.578L18.2,96.831c-1.411,5.491,4.648,9.998,9.575,6.901L53.55,87.813l25.774,15.916   c4.79,2.955,10.844-1.408,9.576-6.902l-7.184-29.435l23.099-19.579c4.363-3.661,2.111-10.844-3.662-11.267l-30.282-2.255   L59.464,6.266c-2.112-5.211-9.577-5.211-11.832,0L36.225,34.292L5.944,36.547C0.174,37.113-2.081,44.154,2.287,47.815z"/>
  </svg>
  `,
  props: ['color']
})
application.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="col in palette">
    <my-image :color="col"></my-image>
  </div>
</div>

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

Centering an image and menu in the middle of an HTML page

I have a school project where I am trying to align both an image and a menu in the center and middle. Here is my code on CodePen: LINK I will also share the code here: HTML <header> <img id="logo" src="https://exampleimage.com/logo.jpg"> < ...

htmlcss

Is it possible to make any object reactive within Vuex?

Seeking ways to enhance the sorting of normalized objects based on a relationship. Imagine having an application that requires organizing data in a Vuex store containing multiple normalized objects, like this: state: { worms: { 3: { id: 3, na ...

javascriptvue.jsvuejs2

Vue fails to recognize scroll events

Recently, I encountered an issue while trying to utilize the aos library in my Vue application. It appears that the library does not detect the scroll event properly, as it only displays elements on the screen and fails to show others upon scrolling. In a ...

vue.js

Is it possible to switch the orientation of the input fields from vertical to horizontal?

My custom form is displayed below: <form novalidate class="form-group" ng-hide="tab==1"> Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum" /> Min Price: <input type="numbe ...

htmlcssformstwitter-bootstrap

What are the steps to ensure HTML5 video fills the entire height and width of the browser window?

Is there a way to make a video fill the entire width and height of the browser on first page load using bootstrap? I am currently facing some issues with achieving this. The code that I have been using seems to work, but the height ends up being more than ...

jqueryhtmlcsshtml5-video

When utilizing scoped slots in BootstrapVue, you may encounter an error stating "Property or method 'data' is not defined."

Greetings! I am currently in the process of learning how to utilize BootstrapVue, and I decided to reference an example from the official BootstrapVue documentation. <template> <div> <b-table :fields="fields" :items="items" foot-clone ...

htmlvue.jsvue-componentbootstrap-vue

utilize the "li" element to function as a clickable button

My HTML code contains ul elements, as shown below: <ul class="nav" id="loadCategories"> <li class="sub-menu"><a href="#">Search by category</a> <ul class=""> <li><a href="#">Food</a></li> ...

htmlcssbuttonhtml-lists

What is the procedure for inserting comments into inline CSS?

You know, I've been wondering how to effectively comment out inline CSS styles within HTML tags. Is it best to use the /* */ comments from CSS? Or should we opt for <!-- --> in HTML? <span class="color_dark" style="top:20px;font-size: 17px;l ...

htmlcss

Drop-Menu - Tubular Formation of Columns

I am currently facing a challenge in creating a filter on a web page using Bootstrap's drop-down menu. The issue lies in placing the filters in columns side by side, as they are stacking up instead. The filter menu is generated dynamically by looping ...

cssdrop-down-menubootstrap-5grid-layout

Implementing alternating v-for loops for DOM elements at the same hierarchy level

I am attempting to create two alternating loops in succession on the same level. However, when I try to wrap them in a parent element and iterate through, it messes up the styles. Here is an illustration of what I am aiming for: <div v-for="category i ...

vue.jsv-for

It is not possible to apply a background color to an HTML element located outside of the App.Vue

Hey there, thanks for taking the time to read my query! I am interested in adding a gradient background color to a specific page on my Vue application. I tried applying the following code in components/Frontpage.Vue: html { background: linear-gradient( ...

cssvue.jsvuejs2vue-component

deployJava.js injects a new <embed> element into the header section of the webpage

I've ran into an issue with the Java applets on my website. I included the deployJava.js load tag in the head section of the page, but when I look at the resulting HTML in Chrome debugger, this script seems to be breaking my head content and starting ...

javajavascripthtmlcssdeployjava

Dealing with "Cannot resolve symbol" issue in PhpStorm due to multiple Vue.js projects being installed

Examining the project structure: -node_modules/ ... -package.json -package-json.lock -vue2/ ... -vue3/ -node_modules/ -src/ App.vue main.ts shims-vue.d.ts -package.json -tsconfig.json -webpack.config.js I have successfully installed two diffe ...

vue.jswebpackidephpstorm

JQuery Mobile header style vanishing when applied to a page generated dynamically

My second page retrieves data from an Ajax call on the home page, but the header lacks JQuery styling and I suspect a connection between the two. Here is the HTML for the dynamically generated page: <div data-role="page" id="breakdownDialog" data-add-b ...

cssjquery-mobilemobiledynamically-generated

Generate two separate CSS files (Mobile and Desktop versions) by compiling a Stylus (.styl) file using Node.js

Can a single Stylus file be compiled into two separate CSS files? For example, one optimized for mobile without the -moz and webkit elements, and another for cross-browser applications? Thank you. ...

cssnode.jsstylus

Is there a way to eliminate the default Tab indicator in Materializecss?

Utilizing the tab feature in MaterializeCSS to enhance the navigation tabs for my web application. By default, the initial tab is already chosen, evident by the underlined indicator beneath it as depicted in the image below. https://i.sstatic.net/PbGb5.pn ...

htmlcssmaterialize

Changing a password for a user account using Keycloak Identity Provider

In my Vue application secured by Keycloak using keycloak-js, I am working on implementing a feature where each user has an account page to change their password. However, I have encountered an issue as Keycloak does not seem to provide an endpoint to check ...

vue.jssecuritykeycloakidp

Tips for showing an Object with nested Objects in Vue.js

Looking for guidance on displaying a JSON object in Vue.js with the following structure: { "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ & ...

javascripthtmljsonvue.jslistview

How to effectively handle submenus within a Bootstrap 4 mobile menu?

I am currently updating our website from Bootstrap 3.3.7 to Bootstrap 4. The header contains a navigation bar with dropdown items. https://i.sstatic.net/n2P6U.png <header> <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white bg- ...

htmlcsstwitter-bootstrapbootstrap-4

Understanding the variable scope in Vuejs

Every time I encounter this issue in Vue.js, I realize that there are some concepts within Vue.js that I may be missing to fully grasp the problem at hand. My current task involves displaying a form for editing my contract with an "edit" variable. My appro ...

vue.js