vuejs passing class to component - vue.js

Question

<template>
<div>
<!-- desktop-->
<svg v-if="name === 'desktop'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path
d="M13 17h-2v2h2v-2zm2 0v2h2a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2h2v-2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5zM4 5v10h16V5H4z"
/>
</svg>
<svg v-if="name === 'draggable-handle'" width="11" height="16" viewBox="0 0 11 16" xmlns="http://www.w3.org/2000/svg">
<circle cx="2.22798" cy="1.45455" r="1.45455" />
<circle cx="8.77486" cy="1.45455" r="1.45455" />
<circle cx="2.22798" cy="14.5454" r="1.45455" />
<circle cx="8.77486" cy="14.5454" r="1.45455" />
<circle cx="2.22798" cy="8.00044" r="1.45455" />
<circle cx="8.77486" cy="8.00044" r="1.45455" />
</svg>
hi all, basically I have a component called SIcon.vue that has a bunch of svg's hardcoded and different name attributes so I can use different ones. What I'm currently trying to do is to pass a class string back to my component. For example here, If I do
<SIcon name="desktop" class="h-10 w-10" />
The svg for desktop should render with the class "h-10 w-10". I need this because I am using tailwindcss and I have to pass back the string exactly. I tried v-bind and adding a class props but it still requires an attribute. Any help would be appreciated

Answer 1

In SIcon.vue, you could start by adding a prop:
props: ['propClass'],
Bind propClass to the svg class:
<svg :class="propClass" ..>
In your parent component:
<SIcon name="desktop" propClass="h-10 w-10" />
And that should bind directly to the SVG

Answer 2

Despite the solution of #procoib using props your solution is almost the better way to go for your example. Instead of using props you could also use $attrs. $attrs allows you to access any class attributes passed from the parent to the child and simply attach those classes to any node within your child.
Your code could somewhat look like this.
<template>
<div>
<!-- desktop-->
<svg
v-if="name === 'desktop'"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
v-bind="$attrs"
>
<path d="M13 17h-2v2h2v-2zm2 0v2h2a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2h2v-2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5zM4 5v10h16V5H4z" />
</svg>
<svg
v-if="name === 'draggable-handle'"
width="11"
height="16"
viewBox="0 0 11 16"
xmlns="http://www.w3.org/2000/svg"
v-bind="$attrs"
>
<circle cx="2.22798" cy="1.45455" r="1.45455" />
<circle cx="8.77486" cy="1.45455" r="1.45455" />
<circle cx="2.22798" cy="14.5454" r="1.45455" />
<circle cx="8.77486" cy="14.5454" r="1.45455" />
<circle cx="2.22798" cy="8.00044" r="1.45455" />
<circle cx="8.77486" cy="8.00044" r="1.45455" />
</svg>
</div>
</template>