Using Style And Class Binding In Vuejs

Conditionally Style SVGs The Vue Way by Ejiro Asiuwhu

Introduction

In this article, we will cover how to conditionally style SVGs elements in a Vuejs application using the v-bind and v-class attribute provided by Vue

Preview

Here is a demo of what we are going to achieve. On click of the SVG, we are going to change the style using the style and class binding provided by Vuejs

Demo

Setup

First, let’s initialize a Vue project using the Vue CLI. Navigate to a directory on your computer and run the following command in your terminal.

vue create svg

After successfully creating the project, navigate to the directory and start the development server using the following command

npm run serve

Getting Started

Next, let’s download an SVG from Flaticon

Let’s create a component called **svg.vue, **and add our SVG to our Vue template with the following

	<template>
	  <section class="svg">
	    <svg
	      version="1.1"
	      id="Capa_1"
	      xmlns="http://www.w3.org/2000/svg"
	      xmlns:xlink="http://www.w3.org/1999/xlink"
	      x="0px"
	      y="0px"
	      viewBox="0 0 489.914 489.914"
	      xml:space="preserve"
	      width="200"
	      fill="#000"
	    >
	      <path
	        d="M483.871,204.522c5.38-4.725,7.395-12.197,5.123-18.98c-2.272-6.785-8.394-11.538-15.53-12.07l-142.249-10.618
		c-6.607-0.502-12.376-4.609-14.982-10.682L259.738,21.184c-2.838-6.555-9.331-10.793-16.484-10.714
		c-7.137,0.066-13.549,4.401-16.259,11.021l-54.056,132.016c-2.497,6.125-8.204,10.346-14.792,10.956l-142.04,13.245
		c-7.117,0.66-13.146,5.527-15.29,12.343c-2.142,6.817,0.017,14.263,5.461,18.884l108.845,92.216
		c5.046,4.288,7.299,11.005,5.851,17.452L89.682,457.786c-1.565,6.978,1.19,14.212,7.023,18.369c5.834,4.141,13.566,4.4,19.658,0.627
		l121.315-75.039c5.624-3.477,12.715-3.545,18.417-0.159l122.686,72.767c6.14,3.642,13.888,3.256,19.624-0.998
		c5.738-4.254,8.381-11.555,6.671-18.496l-33.839-138.575c-1.579-6.43,0.547-13.198,5.511-17.561L483.871,204.522z"
	      />
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	      <g></g>
	    </svg>
	  </section>
	</template>

	<script>
	export default {};
	</script>

	<style>
	</style>

#svg #vue #style #css #vuejs