Recently, I tried to update the appearance of some SVG images using CSS, but to my surprise, nothing changed. Upon inspecting the page, I noticed that the styles were located under the 'element.style' tag, which may explain why my attempts were unsuccessful.
I even attempted to modify the styles using a script, but encountered the same issue. Despite seeing the desired values in the console after using console.log(), the changes did not reflect on the actual page. The styles remained within the element.style tag when inspected. https://i.sstatic.net/kzuuG.png
To make this style modification more versatile, I created a new component that could be used in multiple areas within the main component context.
<template>
<div :class="iconsClassName" :ref="iconsClassName">
<div :class="iconClassName" v-for="(icon, index) in icons" :key="index">
<a :href="icon.mediaLink" target="_blank">
<svg style="width:16px;height:16px" viewBox="0 0 24 24">
<path fill="#ffffff" :d="icon.icon" />
</svg>
</a>
</div>
</div>
</template>
The CSS part is implemented in the main component, and I was attempting to adjust the style in one specific instance where the above-mentioned component was utilized.
.mediaBottom a svg {
width: 21px;
height: 24px;
}
Although I understand that binding values with props would resolve the issue, I am intrigued as to why the previous solutions didn't yield the expected results?