DEV Community: Vishnuraj Sivakumar

Bringing Icons to Life in Vue.js with the Dynamic 'vivid-icon' Component

Vishnuraj Sivakumar — Sat, 28 Jan 2023 04:44:26 +0000

Are you building a Vue.js application and looking for a way to easily display and customize icons? Look no further than the "vivid-icon" component.

Before diving into the implementation of the "vivid-icon" component you need to understand how to import svg in vue+vuetify. you can find the official documentation from vuetify here

The "vivid-icon" component is based on Vue's built-in "v-icon" component, but extends its functionality by allowing you to customize the color, fill, and stroke of the icon. This is achieved through the use of props:

vivid-icon were written on top of the v-icon (a vuetify component) to support both icon and svg.

<template>
    <v-icon v-bind="$attrs" v-on="$listeners" :color="color"
        :class="computedFill || computedStroke || computedColor ? `vivid-icon__f${computedFill}_s${computedStroke}_c${computedColor} vivid-icon` : ''">
        <slot />
    </v-icon>
</template>

props: {
    color: { default: '' },
    fill: { default: '' },
    stroke: { default: '' },
},

But how exactly does this component change the appearance of the icon? The component uses two utility functions, createCssVariableScoped() and updateCssVariablesScoped() to create and update CSS variables that are used to style the icon. These functions are defined in the script section of the component, and allow the component to dynamically update the appearance of the icon based on the values of its props.

The createCssVariableScoped() function takes four arguments: properties, cssClass, element, and additionalClass. It creates a new style tag, sets its id attribute to the concatenation of the cssClass and the componentId, and sets its type attribute to "text/css". It then creates a new style using properties and additionalClass and sets it as the innerText of the style tag. Finally, it returns the style tag.

function createCssVariableScoped(
    properties,
    cssClass,
    element,
    additonalClass
) {
    let componentId = element.attributes[0].name
    let styleTag = document.createElement('style')
    styleTag.id = cssClass + componentId
    styleTag.setAttribute('type', 'text/css')
    let style = `.${cssClass}${additonalClass}{
           ${properties}
          }`

    styleTag.innerText = style
    return styleTag
}

The updateCssVariablesScoped() function takes four arguments: updatedStyle, cssClass, element, and additionalClass. It first retrieves the componentId from the element attributes. It then creates a new style using updatedStyle and additionalClass and sets it as the innerText of the style tag with the id of cssClass + componentId. If the tag is already present it will remove the existing one.

function updateCssVariablesScoped(
    updatedStyle,
    cssClass,
    element,
    additonalClass
) {
    let componentId = element.attributes[0].name
    let style = `.${cssClass}${additonalClass} {
        ${updatedStyle}
    }`

    document
        .querySelectorAll('#' + cssClass + componentId)
        .forEach((item, length) => {
            if (length > 0) {
                item.remove()
            }
        })
    document.getElementById(cssClass + componentId).innerText = style
}

And are used in the component's "mounted" lifecycle hook to create a style tag that contains the CSS variables and to update the variables when the "color", "fill", or "stroke" props change:

mounted() {
        if (this.stroke || this.fill || this.color) {
            let props = `stroke: ${this.stroke ? this.stroke : "inherit"};fill: ${this.fill ? this.fill : "inherit"};color: ${this.color ? this.color : "inherit"};`;

            let additionalClass = `.vivid-icon__f${this.computedFill}_s${this.computedStroke}_c${this.computedColor} .vivid-icon--color`;


            this.styleTag = createCssVariableScoped(
                props,
                "vivid-icon",
                this.$el,
                additionalClass
            );
            document.head.appendChild(this.styleTag);
        }
    }

In addition to this, the component also uses computed properties to convert the "color", "fill", and "stroke" props to strings, which are used to generate class names for the icon. These class names are used to scope the CSS variables to the icon, so that they only affect the icon and not other elements on the page:

computed: {
  computedColor() {
    return convertToStr(this.color);
  },
  computedFill() {
    return convertToStr(this.fill);
  },
  computedStroke() {
    return convertToStr(this.stroke);
  },
}

The convertToStr function inside the computed convert the multiple color type input to common standard and that color is used to apply in the icon.

function convertToStr(str) {
    if (!str) {
        return "";
    }
    if (str.startsWith("#")) {
        return str.substring(1);
    }
    if (str.startsWith("rgba")) {
        return str.substring(5, str.length - 1);
    }
    if (str.startsWith("rgb")) {
        return str.substring(4, str.length - 1);
    }
    if (str.startsWith("var")) {
        return str.substring(4, str.length - 1);
    }
}

The "watch" property is an important feature of the "vivid-icon" component, as it ensures that the icon's appearance is updated in real-time as the "color", "fill" and "stroke" props change. This provides a dynamic and interactive experience for the user, making it easy for them to see the changes they make to the icon's appearance.

In addition to the "watch" property, the component also has a "beforeDestroy" hook that removes the component from the DOM and the component's style tag from the head of the document when the component is destroyed:

beforeDestroy() {
   this.styleTag.remove()
   this.$el.remove()
},

This ensures that the component's resources are properly cleaned up when it is no longer needed, which is important for maintaining the performance of the application.

To use the "vivid-icon" component in your Vue.js application, you simply need to import it and use it like any other Vue component. For example:

<template>
    <vivid-icon :color="color" :fill="fill" :stroke="stroke"> $vue</vivid-icon >
</template>

<script>
import vividIcon from '../components/vividIcon.vue'

export default {
    components: {
        vividIcon,
    },
    data() {
        return {
            color: 'red',
            fill: 'blue',
            stroke: 'green',
        }
    },
}
</script>

In this example, the "vivid-icon" component is used with the "color", "fill" and "stroke" props set to "red", "blue", and "green" respectively. This would result in an icon that has a red color, blue fill, and green stroke.

To implement the "vivid-icon" component in your Vue.js application, you will need to follow these steps:

Download the SVG file that you want to use as an icon.
Rename the file from .svg to .vue.
This will allow you to use the file as a Vue component.
Wrap the content of the SVG file with a tag. This will ensure that the SVG content is properly rendered as an icon.
Create an index file and add the component as shown in the example below:

import vue from './vue';

export default {
  vue: {
    component: vue,
  },
}

Import that in vuetify plugin as shown in the example below:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import IconValue  from './index.js'

Vue.use(Vuetify)

export default new Vuetify({
    icons: {
        iconfont: 'mdi', // default - only for display purposes
        values: IconValue,
    },
})

You can now use the icon in your template by calling the component, passing in the props of size, fill, and stroke, and the class vivid-icon--color as shown in the example below:

<template>
    <vivid-icon size="45" fill="orange">$vue</vivid-icon>
</template>
<script>
import VividIcon from '../components/vividIcon.vue'
export default {
    components: {
        VividIcon,
    },
}
</script>

By following these steps, you will be able to easily use and customize icons in your Vue.js application using the "vivid-icon" component. The ability to import svg in vue+vuetify allows you to have a wide range of icons to choose from and customize as per your requirement. This component is easy to use, and it allows you to change the color, fill, and stroke of your icons and ensure that the changes are only applied to specific elements.

In conclusion, the "vivid-icon" component is a powerful and flexible way to display and customize icons in a Vue.js application. With the ability to customize the color, fill, and stroke of the icon and the use of computed properties and the watch property, it provides a dynamic and interactive experience for the user. It is easy to use, and it is a great way to add a touch of visual appeal to your application.

Source code: vivid-icon-vue

Vue + Vuetify : Custom Component Library

Vishnuraj Sivakumar — Fri, 16 Jul 2021 08:27:46 +0000

There is great support for Material Design in Vue.js. One of the libraries available for Vue.js is Vuetify. It is easy to incorporate into your Vue.js app and the result is appealing to the users’ eyes and most importantly Vuetify has plenty of components.

But there are few cases that you want to common design or style and serve for multiple products. Vue has great support for creating App, Library, and Web components. You choose the type at the time of building. In this post, we are going to look at how to create a custom library using Vue.

So here is my setup

Windows 10 21H1
Node.js v12.22.1.
@vue/cli 4.5.13

To start building the app, we have to install the Vue CLI. We do
this by running:

if you don't have Vue CLI try this below step to run. if you already had Vue CLI skip this step

npm install -g @vue/cli

Once you install Vue CLI you start creating project

vue create --default custom-lib

after the command execute go to custom-lib and install Vuetify

npm i --save --save-exact vuetify

The reason we are using npm I instead of Vue add Vuetify is that when building as a library you need the dependencies inside the component

and install the required dependencies to build.

npm i sass@~1.32 sass-loader@^10.1.1 deepmerge -D

Here your base setup is done.
Next, you need to create custom components. I recommend creating components inside src\components. I am creating a component name customButton.vue. Find the code for customButton.vue

<template>
  <v-btn color="orange"> I am custom button </v-btn>
</template>

<script>
import { VBtn } from "vuetify/lib";
export default {
  name: "custom-button",
  components: { VBtn },
};
</script>
<style lang="scss" scoped>
</style>

* templates are HTML that can be parsed by spec-compliant browsers and HTML parsers.

* script holds the logic of the component

* styles used style property of the component

Note: The name inside the script is used to access the component.

Once the component is created I recommended you create a wrapper.js file inside a component. so that can control components that we may add or remove without deleting the .vue file

Here is my wrapper.js code

export { default as customButton } from './customButton.vue'

you can add as much as you want without affecting existing code

Then create an index.js in src\index.js. We register all the components in index.js that we do need to import every time in an application.
Here is my index.js.

import * as components from './components/wrapper';

const vueWrapper = {
    install(Vue) {
        componentRegistration(Vue);
    }
}

const componentRegistration = function (Vue) {
    for (let item in components) {
        Vue.component(components[item].name || "idx-test", components[item]);
    }
}


// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null;
if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue;
}
if (GlobalVue) {
    GlobalVue.use(vueWrapper);
}

export * from './components/wrapper';
export default vueWrapper;

if you want to learn more try Component Registration

Hooray!. Our library is ready. All we need to do is build and test.
After all this Setup your library files look like this

To build the project as the library you need to add some configuration in package.json

First, you need to run the script that convert project as library.

So, I am adding a script to build as the library

"scripts": {
   "lib":"vue-cli-service build --target lib --inline-vue --name customLib ./src/index.js",
   "serve": "vue-cli-service serve"
 },

By Default, Vue builds lib for CommonJS and UMD. We just need to mention which file to take when we load in node/browser.
We can do this by specifying main, module, unpack, and files in package.json.

"main": "dist/customLib.umd.js",
"module": "dist/customLib.esm.js",
"unpkg": "dist/customLib.min.js",
"files": [
  "dist/*"
],

Now run npm run lib and you will get files like the below one.

 File                         Size                                                                Gzipped

  dist\customLib.umd.min.js    113.30 KiB                                                          39.58 KiB
  dist\customLib.umd.js        320.29 KiB                                                          87.29 KiB
  dist\customLib.common.js     319.90 KiB                                                          87.17 KiB
  dist\customLib.css           279.52 KiB                                                          32.71 KiB

So here you have created a library 🥳.

Tips: if you don't want seperate css file then you have to add

module.exports = {
  css: {
    extract: false
  }
}

in vue.config.js.

and now it's time to check the library. For that, I am going to create a new project called application and use npm link. you can also deploy and check from NPM. you can Learn more in npm link

First I am making the library a global package by using

npm link

Then Go to the application and add map lib to the application using

npm link custom-lib

and install the library as a dependency by

npm i ../custom-lib

if you clone this project just run `npm run link`

After all the above steps are done navigate to main.js in the application and import and use the library by

import library from 'custom-lib'
import 'custom-lib/dist/customLib.css'
Vue.use(library);

Then go to App.vue and call the component we created in a template like

<template>
 <custom-button></custom-button>
</template>

and run. you will get output in http://localhost:8080/ and it looks like

That's all.

if you face error in eslint. try to remove `"eslint:recommended"` from `package.json`, run `npm i`and try again.

Find the source code at
github