Imported svg icon could not adjust size by using style sheet

#1

here is the icon i tried to download from Microsoft website.

https://download.microsoft.com/download/e/f/4/ef434e60-8cdc-4dd1-9d9f-e58670e57ec1/Power_Platform_scalable.zip

after i imported into my wiki. below template doesn’t work for them.
but below style sheet works perfetly on core icon and the tw-icon(TW Icons v1.10 — A large collection of icons for TiddlyWiki)

<style>
.my-icon svg {
  width: auto;
  height: 4em;
}
</style>

<span class="my-icon"><$transclude /></span>
1 Like
#2

Transcluding an SVG that way seems to generate an image tag, using a data-uri for its src parameter. So there’s no svg element.

Can you try

.my-icon img {
  width: auto;
  height: 4em;
}

instead? It seems to work for me:

Power_Platfform.icons.json (41.7 KB)

1 Like
#3

it works !!!

#4

now i have another problem, this “img” tag did work for the svg i download but not work for svg i imported from tw-icon(TW Icons v1.10 — A large collection of icons for TiddlyWiki)

so, svg tag work for TW icons, img tag work for power_platform icons. …how could i make them both work the same time.

#5

While I’m sure there’s a simple enough way to convert one to the other, you can easily handle both with the same CSS:

.my-icon svg, .my-icon img {
  width: auto;
  height: 4em;
}
#6

don’t know we can do both in one css :rofl: thanks!

1 Like