During the development of a nuxt boilerplate setup, i created a module that simplifies usage of svg elements in the app. The developers can place svg elements in a specific folder. During the build process, all .svg files in this folder are added to a property in the nuxt appConfig, and written to a .scss file.

The custom nuxt module has 2 options:

• Input: Folder that contains the .svg files
• Output: The output .scss file

The `detectIcons` method uses FS to read the .svg files in the folder. The method uses a map to go through all the files and reads the viewbox and dimensions of each svg file. It returns an array of objects for all the files.

The `saveIconsToScss` method receives the array and generates a .scss file that contains scss vars for all the icons.

In scss the svg elements can be implemented by using @use in scss to load the file. Within this icons namespace the developer can that implement the required svg element. By styling it with background-color and mask-image, the icons can be used in various colors with smooth transitions.

Developers can use a composable to get the svg form the nuxt appConfig. There is also a component that implements this composable to make it even more easy to use.