Utilizing vuetifyjs: Selectively incorporating necessary icons into the build

I am currently working on a vuetifyjs-app using the default "Material Design Icons". For the production build, I am only utilizing 2 icons from this font (which are being used by the vuetify-component chips).

Following recommendations, I have included the complete iconfont with

<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0b0203192d5e4315">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">

However, in the production build, this requires the user to download almost 0.5MB of data just for 2 icons. Is there a way to:

  • Include only the necessary icons in the CDN request or
  • Utilize Tree-Shaking to include only the needed icons in the main CSS file? (I am using the parcel.js builder)
javascriptvue.jsvuetify.jsmaterial-design-icons

Answer №1

If you're looking to enhance your project with icons, we suggest utilizing @mdi/js whenever possible. This package offers an ES Module that exports the SVG path for each icon in the set and is compatible with treeshaking. You can simply input the icon string into an SVG path element or, in this scenario, directly pass it to v-icon by specifying the icon font in the Vuetify configuration: iconfont: 'mdiSvg'.

Setup Guide

npm install @mdi/js

Instructions

<template>
  <v-icon>{{ mdiCheck }}</v-icon>
</template>

<script>
  import { mdiCheck } from '@mdi/js'

  export default {
    data: () => ({
      mdiCheck,
    }),
  }
</script>

To explore further on how to integrate these icons with Vuetify, check out: https://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for zooming to the middle of a div element

I'm trying to figure out how to create a zoom in effect on my large div, but I haven't been successful despite searching through many resources. My goal is to zoom into the center of the user's screen rather than just at a set position. ht ...

javascriptjqueryhtmlcss

When a specific condition is met, Jquery can automatically execute a function contained

I am trying to slowly reveal the h1 tag using jQuery for demonstration purposes. The scroll function is working when I manually click to initiate it, but I am having trouble triggering it automatically. I feel like I might be missing something simple and ...

javascriptjquery

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...

javascripthtmlcsstwitter-bootstrap

JavaScript array containing objects remains static

I'm facing an issue with a complex array of objects (I will only display the necessary nodes to explain the problem): var arr = [ { json: { doc: { id: 1, atualizacao:{ ...

javascriptarraysjsonobject

The reactivity of Vuex and Vue does not work as expected when a dictionary is used as a

What is the best approach to make a dictionary reactive as one of my store variables? Unlike an array, dictionaries are not reactive by default. Here's a minimal example I've created: Check out this example on CodeSandbox ...

javascriptvue.jsvuexvue-reactivity

Difficulty reloading after updating input using AngularJS ngTable

I'm encountering an issue where I need to utilize ngTable with TableParams to load and modify a table. For instance, when the page initializes, entering a number in the textbox for the first time displays the appropriate number of rows in the table. ...

javascriptjqueryangularjsangularngtable

Clearing Vuex State on View Transition in Vue 3

I am currently developing a web application using Vue3 that is reminiscent of Scratch, specifically with a dedicated page for game creation. In order for all components to access necessary data about the game, I need to track certain information in a store ...

vue.jsvuexvuejs3

Steps for automatically toggling a button within a button-group when the page is loaded using jQuery in Bootstrap 3

Here is a button group setup: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="environment" id="staging" value="staging" />Staging </label> <label class= ...

javascriptjquerytwitter-bootstrap-3

Issues with sending emails through Nodemailer in a Next.js project using Typescript

I'm currently working on a personal project using Nodemailer along with Next.js and Typescript. This is my first time incorporating Nodemailer into my project, and I've encountered some issues while trying to make it work. I've been followin ...

javascriptreactjstypescriptnext.jsnodemailer

Error: The function callback.apply is not a valid function (Node.js and Mongodb)

Encountered an error when adding the line "{ upsert: true }": Error message: TypeError: callback.apply is not a function // Accessing routes that end in /users/competitorAnalysisTextData // ---------------------------------------------------- router . ...

javascriptnode.jsmongodbmongoosecallback

When the page is refreshed, the ID passed through params disappears

One of the challenges I am facing involves a component called Subscribers that receives props through params from another component known as Details. These props are used to make an API call and retrieve a list of subscribers, which functions correctly. H ...

vue.jsparameters

Error: Attempting to access a property of an undefined object using method chaining

I encountered an error of property undefined with the code below. I'm not sure what's causing it. I checked by doing a console.log(navList) in the render and it does have a value. Even after adding if(!navList) return null, I still get the same e ...

javascriptreactjsecmascript-6

Modifying the appearance of a Component within a NavLink

I'm currently working on a navbar using NavLink from React-Router-Dom. It's fine to use the 'isActive' prop to style the active Link, but I'm stuck on how to style the subelements inside it. For more specific details, please take a ...

javascriptreactjstypescriptreact-router-domreact-props

Creating an Interactive Table Using HTML, JavaScript, and PHP?

After reviewing this project, I am looking to customize the js function in relation to my own table. The key focus is on the following code: $("#employee_table tr:last").after("<tr id='row"+$rowno+"'><td><input type='text&apo ...

javascriptphphtml

Preserve the values of checkboxes throughout the entire website by utilizing localStorage

Example A functionality in the example allows users to add images to a container by clicking on checkboxes. However, there is an issue where when a checkbox is checked on one page to store an image, and then another checkbox is checked on a different page ...

javascriptjqueryhtmllocal-storage

Creating a new buffer by extracting a segment of another buffer in Node.js

Currently, I am executing an AWS call in Node.js that returns a buffer. var aws = new AWS.S3(); var params = { Bucket: s3config.bucket, Key: s3config.tile_directory + filepath //, // Range: 'bytes=0-' + (this.HEADER_SIZE - 1) }; ...

javascriptnode.jsamazon-web-servicesbuffer

"Exploring the world of arrays and looping in

Can someone assist me with this issue? I am currently stuck in JS Arrays & Loops and I can't understand why it's not returning "0" when the function is empty. function sumArray (numbers) { // your code var numbers = [1, 2, 3, 4]; if (nu ...

javascriptarraysloops

Error occurs in console when using .getJSON with undefined JSON, but does not happen when using embedded data

Can someone help me understand why I'm getting an 'undefined' response when I use console.log(tooltipValues), but there's no issue with console.log(tooltipJSON). I've noticed that when I embed the data directly in my JS code, ever ...

javascriptjson

Executing various tasks concurrently with web workers in Node.js

Looking to read multiple JSON files simultaneously and consolidate the data into a single array for processing on a Node.js server. Interested in running these file readings and processing tasks concurrently using web workers. Despite finding informative ...

javascriptnode.jsjsontypescriptweb-worker

Utilizing an SSL certification (pem file) within JavaScript

Currently in the process of developing a program to extract data from the FAA's AIDAP database. I received a security certificate in the form of a .p12 file, which I have successfully converted into a .pem file. However, I am encountering difficulties ...

javascriptnode.jssslnpmpem