How to use any icons with Nuxt or Vue?

The process of integrating custom icons into Nuxt or Vue applications can be broken down into several steps. I will walk you through each step in detail and provide an example to demonstrate how to implement it.

Step 1: Select the Icon

First, decide on the type of custom icon you want to use. You can design your own SVG icons or obtain them from a designer. Once you have the SVG file, the next step is to integrate it into your Nuxt or Vue application.

Step 2: Add Icons to the Project

Add the SVG icon files to your project. Typically, create a folder named assets/icons and place your SVG files there.

Step 3: Create Vue Components

To make it easier to use these icons in Nuxt or Vue, convert each SVG icon into a Vue component. For example, if you have an icon named menu-icon.svg, create a new file called MenuIcon.vue:

vue
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <!-- SVG path -->
  </svg>
</template>

<script>
export default {
  name: 'MenuIcon'
}
</script>

Inside the <svg> tag, insert the path of your SVG icon.

Step 4: Use Icons in Components

Now, you can use this newly created icon component in any Vue component. First, import it:

vue
<template>
  <div>
    <menu-icon />
  </div>
</template>

<script>
import MenuIcon from '~/components/icons/MenuIcon.vue';

export default {
  components: {
    MenuIcon
  }
}
</script>

This approach makes it straightforward to reuse SVG icons and allows you to control their styles with CSS.

Step 5: Style the Icons

You can directly apply classes or styles within the SVG component to adjust properties such as size and color. For example:

vue
<template>
  <svg class="icon" ...>
    <!-- SVG content -->
  </svg>
</template>

<style>
.icon {
  fill: currentColor;
  width: 1em;
  height: 1em;
}
</style>

This enables you to adjust the icon's color and size by setting color and font-size when using it in different contexts, just like handling font icons.

Conclusion

By converting SVG icons into Vue components, you not only enhance the flexibility and maintainability of using icons in Nuxt or Vue projects but also simplify style control. This method is highly effective for ensuring consistency and optimizing performance.