Vue.js has this amazing power to manipulate the attributes of an SVG file directly without any aid. While other flux-based frameworks often require support of external libraries, Vue doesn’t. In this example, I’ll show you how you can manipulate the “fill” attribute of SVG files with the native color picker of your web browser.  For that, here’s the code I’ve written:

<template>
  <div id="app">
    <div class="np-icons">
      <div class="np-icon-ib">
        <FacebookIcon :svgColor="facebookColor" />
      </div>
      <div class="np-icon-ib">
        <TwitterIcon :svgColor="twitterColor" />
      </div>
      <div class="np-icon-ib">
        <InstagramIcon :svgColor="instagramColor" />
      </div>
      <div class="np-icon-ib">
        <BehanceIcon :svgColor="behanceColor" />
      </div>
    </div>
    <div class="np-icon-color-picker">
      <label for="favcolor">Select facebook color</label>
      <input
        v-model="facebookColor"
        type="color"
        id="favcolor"
        name="favcolor"
        value="#4267B2"
        class="np-input-color-pos"
      />
    </div>
    <div class="np-icon-color-picker">
      <label for="favcolor">Select twitter color</label>
      <input
        v-model="twitterColor"
        type="color"
        id="favcolor"
        name="favcolor"
        value="#1DA1F2"
        class="np-input-color-pos"
      />
    </div>
    <div class="np-icon-color-picker">
      <label for="favcolor">Select instagram color</label>
      <input
        v-model="instagramColor"
        type="color"
        id="favcolor"
        name="favcolor"
        value="#f000ff"
        class="np-input-color-pos"
      />
    </div>
    <div class="np-icon-color-picker">
      <label for="favcolor">Select behance color</label>
      <input
        v-model="behanceColor"
        type="color"
        id="favcolor"
        name="favcolor"
        value="#053eff"
        class="np-input-color-pos"
      />
    </div>
    <div class="np-credits">www.nightprogrammer.com</div>
  </div>
</template>
<script>
import FacebookIcon from "./../assets/facebook";
import TwitterIcon from "./../assets/twitter";
import InstagramIcon from "./../assets/instagram";
import BehanceIcon from "./../assets/behance";

export default {
  name: "App",
  data() {
    return {
      facebookColor: "#4267B2",
      twitterColor: "#1DA1F2",
      instagramColor: "#f000ff",
      behanceColor: "#053eff",
    };
  },
  components: {
    FacebookIcon,
    TwitterIcon,
    InstagramIcon,
    BehanceIcon,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.np-icons {
  padding-bottom: 12px;
}
.np-icon-ib {
  display: inline-block;
  padding-right: 12px;
}
.np-credits {
  font-size: 12px;
  padding-top: 14px;
}
.np-icon-color-picker {
  padding-bottom: 6px;
}
.np-input-color-pos {
  margin-left: 10px;
}
</style>
Code language: HTML, XML (xml)

As shown in the code above, I’ve imported four SVG files as components and used them on lines 5, 8, 11, and 14 respectively. I’ve passed a prop name svgColor to each of them.

I’ve controlled their values using the local states declared through 74 to 77. You can directly manipulate the HEX values using the native color input picker. I’ve done so on line 19, as in case of Facebook. Now if you open any of the SVG components, here’s how they look like. This is for Facebook:

<template>
  <div>
    <svg
      :fill="svgColor"
      version="1.1"
      baseProfile="tiny"
      id="Layer_1"
      xmlns:x="&ns_extend;"
      xmlns:i="&ns_ai;"
      xmlns:graph="&ns_graphs;"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
      x="0px"
      y="0px"
      width="42px"
      height="42px"
      viewBox="-0.5 0.5 42 42"
      xml:space="preserve"
    >
      <path
        d="M28.08,6.51c0.29-0.01,1.109-0.03,1.42-0.01c1.12,0,2.84-0.1,4,0v5h-4c-1.46,0-2,0.35-2,2v4h5v5h-5v14h-5v-14h-4v-5h4
	l-0.061-4.42c0-3.061,0.621-4.92,3.15-6.02C26.24,6.78,27.23,6.53,28.08,6.51z M0.5,1.5v39h39v-39H0.5z"
      />
    </svg>
  </div>
</template>

<script>
export default {
  name: "Facebook",
  props: ["svgColor"],
};
</script>
Code language: HTML, XML (xml)

I’ve used an attribute called fill on line 4. It receives its value as a prop svgColor as shown on line 32. You’d notice that this template doesn’t contain any logic code. All it does is, renders the component based on the color change received in the svgColor prop.

You can find a working version of the above example from my repos here:

Codesandbox/Demo | Github