Is it possible to utilize the v-icon component in Vuetify to display a custom icon that has been defined as an SVG in a file named my-icon.svg? This SVG file is located within the public/img directory of my project. How can I reference this file inside the v-icon component?
As far as I know, if you're looking to utilize an external svg, the answer is unfortunately no.
However, you have the option to import the svg file as a component using vue-svg-loader and then use it within v-icon.
import Stack from "@/icons/stack.svg"; // importing /src/icons/stack.svg
export default {
components: {
Stack
}
};
After that, you can use it like this:
<v-icon>
<Stack/>
</v-icon>
For another solution, check out How To Add Custom SVG Icon in Vuetify - Vue.
You can use CSS to achieve the same effect.
.v-icon
height: 20px;
width: 20px;
&.engine {
background-image: url(https://www.svgrepo.com/show/9344/train.svg);
background-size: contain;
background-repeat: no-repeat;
}
&::before {
visibility: hidden;
content: "";
}
For a demonstration, you can visit this codepen link.
My issue lies in fetching data using axios to populate a select box with options as shown below: <optgroup label="group1"> <option v-for="aa11 in aa11" :value="aa11.value" :key="aa11.code">{{aa11.value}}</option> </optgroup> < ...
I am struggling to override the CSS for <h1> and <h2> using specific selectors only. The changes are only being applied to one class, with <h1> changing color to green but not <h2>. Can someone please assist me in identifying where ...
Check out my jsFiddle for an example of an onHover event that changes the image. It's working perfectly in chrome, but not quite right in firefox. Any suggestions on how to fix it? Here's the jQuery function I'm using: $(document).ready(fu ...
I am currently working on implementing a dark mode function for my website, and I have successfully adjusted the divs and other elements. However, I am facing an issue with changing the paths of images. In order to enable dark mode, I have created two sep ...
In my HTML template, I am encountering an issue with two common components. When I click on the app-header link, its active class is applied. However, when I proceed to click on the side navbar's link, its active class also gets applied. I want to en ...
When setting flex: 1 1 0 on flex items, it does not work as expected especially when the flex items contain images of varying sizes. In this scenario, the flex-item containing the image ends up becoming significantly wider than the others. Below is the H ...
I am currently working with two JSON files named contacts and workers. Using the workerId present in the contacts JSON, I have implemented a loop to display workers associated with each contact. The current display looks like this: https://i.sstatic.net/AR ...
Having a peculiar box-model issue here. My header is filled with links, but despite setting 0px margins, the links are displaying with 2px margins around each one. To demonstrate the problem, I've created a test page located at . Ideally, each link i ...
How can I make the button with position: fixed property only visible inside the second div and not remain fixed when scrolling to the first or last div? .one{ height:600px; width: 100%; background-color: re ...
One technique I frequently employ is using the CSS universal selector to reset the dimensions in my HTML document: * { border: 0; margin: 0; padding: 0; } I wonder if a similar approach can be achieved with JavaScript as well? When it come ...
Hey everyone, I recently created a web application using the Vue framework. To prepare for deployment, I followed the instruction to get a dist file by running: npm run build Once I obtained the dist file, I uploaded the entire application folder to File ...
In each of my posts, I manually insert one Adsense unit. Here is the code: <div id="toppostad" style="float: left"> Adsense code </div> Initially, I assigned an id to the div when placing the code with the intention of using display:none; to ...
While working on my project at this link, I encountered an issue with displaying a styled modal. Despite trying to import the styles using: <style scoped> @import "../styles/modal-style.css"; </style> and even directly pasting the co ...
https://i.sstatic.net/I5ZVO.png I've attempted adding a ? after each word and also experimented with the following code: const totalNameLenght = computed(() => { if (userFirstnameLenght.value && userLastnameLenght.value){ ret ...
I recently integrated Pinia into my Nuxt3 project, and while everything works fine in development mode, I encountered an error when trying to access the application in production mode resulting in the website freezing. [h3] [unhandled] H3Error: Cannot find ...
Having an <hr> element with the color #ac8900 is what I require. When I apply the style in the traditional way <hr color="#ac8900"> it functions perfectly. However, the expectation is to style everything using CSS, so I attempted the followin ...
Seeking advice on a Javascript query that I can't seem to resolve online. As a beginner in Javascript, I'm struggling with what seems like a simple issue. My dilemma lies in enlarging the close button on a jQuery page. .ui-dialog .ui-header .ui- ...
I am encountering an issue with the Vue.js method and Laravel Echo. Broadcast channel Broadcast::channel('task.*', function ($user, $taskId) { $task = Task::find($taskId); if ($task) { return ['id' => $user-> ...
Here are the steps you should follow: Instead of using node v14+, switch to node v10+. (IMPORTANT) Add the following paths to your ~/.zshrc file (if you use zsh): /Users/[yourUsername]/.npm-packages/bin /Users/[yourUsername]/.npm-global/bin After ...
I am currently in the process of developing a frontend using Vue cli and a backend with Django integrated with Graphene. At the moment, I am facing an issue where my mutations are working perfectly fine, but the queries seem to encounter some problems. In ...