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

How to truncate text in a cell of a Vuetify data table using CSS styling

Is there a way to truncate text in a cell using CSS without it wrapping around or overflowing? The ideal CSS code should include: .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } However, the current implementation caus ...

cssvue.jsvuetify.js

The Angular 1.5 directive utilizes one-way binding to seamlessly update the parent scope

I am experiencing an issue with a directive that has an isolated-scope and one-way binding variable. Despite setting up the directive to keep the scope separate, any changes made to the variable in the directive controller also update the parent scope. Be ...

javascriptangularjsangularjs-directiveangularjs-scope

Using AngularJS to Dynamically Set the Default Selection in a SELECT Element

In my code using JADE syntax, I have the following structure: select(ng-model="eventTypeUI") option(ng-repeat="c in eventUI", ng-value='c.value', ng-disabled='selectEventCanNotBeUsed(c.value)') {{c.name}} ...

javascriptangularjspug

Remove repeated selections in a dropdown menu using Vue JS

Could someone offer me some assistance, please? I have 3 dropdown menus that need to display specific subjects based on previous selections. One issue I'm facing is how to remove the initial selection in menu one from both menu two and menu three? I ...

vue.js

What is the best way to iterate through JSON objects stored in a single location?

Currently, I am dealing with a single JSON object structured as follows: Object --> text --> body --> div Array[20] --> 0 Object --> text --> body --> div Array[20] --> 1 Object --> text --> body --> div Array[20] --> . ...

javascripthtmljsonfilefor-loop

Tips on displaying tooltips on multiple graphs in Highcharts using Vue 3

I am currently utilizing vue3-highcharts in conjunction with Highcharts. My goal is to replicate a similar functionality as shown in this example: https://codepen.io/lzl124631x/pen/KLEdby?editors=1010. However, I am unsure about the correct syntax for impl ...

javascriptvue.jshighcharts

Error: Attempting to access 'map' property of an undefined variable in NEXTJS

I've been struggling to retrieve an image from this API using getStaticProps, but for some reason I can't seem to make it work. In my code snippet, if I add a question mark like this, the console returns 'undefined'. What could be caus ...

javascriptarraysnext.jsfetch-api

Utilizing multiple instances of fs.writeFile in Node.js

I am currently managing a hotel's check-in/out information on an http server in Node.js. I store all the JSON data in memory and write it to a file using "fs.writeFile". Typically, the data does not exceed 145kB, but when consecutive calls to fs.write ...

javascriptnode.jsconcurrencywritefile

Tips for extracting data from a JQuery table with Python

My goal is to extract information from the top ten items on a manga website using Python Selenium/BeautifulSoup. However, I am facing challenges due to the website loading its content through a jquery script. The tutorials and guides I have followed do not ...

javascriptpythonjqueryseleniumweb-scraping

Pre-rendering Vue.js components with dynamically generated PHP content

Seeking guidance on prerendering a Vue app constructed with PHP (either Laravel or pure PHP). My inquiry pertains to understanding how prerendering functions with dynamic content. For instance, when creating a blog using Vue and PHP to display posts, I uti ...

phpvue.jsseoprerender

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Recently, I encountered the following code snippet: document.getElementById("myDiv").addEventListener("keydown", function (e){ if (e.keyCode == 8) { this.innerHTML += "&#10240;".repeat(4); e.preventDefault(); } //moves cursor } ...

javascripthtmlcursor

Scroll Bar Menu (User-Controlled)

I'm looking for any libraries out there that can replicate or provide a similar horizontal scrolling menu to that of espn.com's homepage. I'm relatively new to jquery and feeling a bit lost on where to begin. I did some searching on Google, ...

javascriptjquerycss

Bootstrap 4 Card Body Spinner Overlay with Flex Alignment

Seeking to center a spinner both vertically and horizontally within a bootstrap 4 card body. Despite trying my-auto, justify-content-center & align-items-center, it seems like I'm missing something. I've double-checked the display types and ...

javascripthtmlcssflexboxbootstrap-4

Modify the text tone within a specific cell

Welcome to my unique webpage where I have implemented a special feature. The text highlighted in red represents the unique identifier for each individual cell. Interestingly, below there is an input field containing the code "0099CC", which corresponds to ...

javascriptcss

What could potentially be the reason behind the incapability of the next.js Image component to transform the svg into a

Unique Context I recently developed a minimalist Hero + Navbar using Next.js. The site utilizes the powerful next.js Image component to display images. Surprisingly, all three images on the website, which are in .webp format, load instantly with a size of ...

javascriptsvgnext.js

A comprehensive guide on organizing JavaScript files within an Angular project

In the process of building my MEAN app, I have structured my folders in the following way: I have included a js file in /angular/src/assets/js for jQuery functionalities. To achieve this, I utilized npm to install jQuery. Now, I am faced with the task o ...

javascriptjqueryangular

Filter ng-repeat according to the user's choice

Currently, I am developing a music catalog and working on implementing a feature that allows users to filter the catalog based on a list of artists and genres The list: <ul class="artists"> <li class="title"> <h5> ...

javascriptangularjsdynamicweb-applicationsfiltering

Retrieve a value using the jQuery each() method

Hello, I am a beginner in JavaScript and I need help with extracting values from JSON and adding them to an array. My goal is to be able to parse this array using another function later on. However, I'm struggling with returning the array after adding ...

javascriptjqueryarraysjson

Trouble of VueJs array data property with .includes() in search for integer value

I'm struggling to figure out how to check if an integer value is already stored in the data property of array type. The Observer type property always returns false when I ask: this.selected.includes(value) Below is my complete example - I cast the va ...

vue.jsvuejs2observable

Is there a way to retrieve a promise from a function that triggers a $http.get request in AngularJS?

Looking for a solution to modify this function: getX: function ($scope) { $http.get('/api/X/GetSelect') .success(function (data) { ... ... }) .error(function (data) { ...

javascriptangularjs