aidenlx / obsidian-icon-shortcodes

Obsidian Plugin: Insert emoji and custom icons with shortcodes
MIT License
146 stars 11 forks source link

Icons become extra huge after Obsidian v.1.0.0 #59

Closed GinoReiji closed 1 year ago

GinoReiji commented 1 year ago

The the latest Obsidian update stops supporting the theme I was using so I ended up deleting it and going back to the default theme. Now all the icons I put in front of the heading become extremely huge for some reason. Emoji ones are ok, but the svg files just get so big it covers the entire page 😟

p-laranjinha commented 1 year ago

I believe the fix should just be changing var(--h@{level}) to var(--h@{level}-size) in this line, I can't be completely sure though, as I've never worked on an Obsidian plugin.

Meanwhile, @GinoReiji, you could use this snippet:

.markdown-source-view .HyperMD-header-1 .isc-icon>img,
.markdown-source-view .HyperMD-header-1 .isc-icon>svg,
.markdown-preview-view h1 .isc-icon>img,
.markdown-preview-view h1 .isc-icon>svg {
    height: var(--h1-size);
}

.markdown-source-view .HyperMD-header-2 .isc-icon>img,
.markdown-source-view .HyperMD-header-2 .isc-icon>svg,
.markdown-preview-view h2 .isc-icon>img,
.markdown-preview-view h2 .isc-icon>svg {
    height: var(--h2-size);
}

.markdown-source-view .HyperMD-header-3 .isc-icon>img,
.markdown-source-view .HyperMD-header-3 .isc-icon>svg,
.markdown-preview-view h3 .isc-icon>img,
.markdown-preview-view h3 .isc-icon>svg {
    height: var(--h3-size);
}

.markdown-source-view .HyperMD-header-4 .isc-icon>img,
.markdown-source-view .HyperMD-header-4 .isc-icon>svg,
.markdown-preview-view h4 .isc-icon>img,
.markdown-preview-view h4 .isc-icon>svg {
    height: var(--h4-size);
}

.markdown-source-view .HyperMD-header-5 .isc-icon>img,
.markdown-source-view .HyperMD-header-5 .isc-icon>svg,
.markdown-preview-view h5 .isc-icon>img,
.markdown-preview-view h5 .isc-icon>svg {
    height: var(--h5-size);
}

.markdown-source-view .HyperMD-header-6 .isc-icon>img,
.markdown-source-view .HyperMD-header-6 .isc-icon>svg,
.markdown-preview-view h6 .isc-icon>img,
.markdown-preview-view h6 .isc-icon>svg {
    height: var(--h6-size);
}
GinoReiji commented 1 year ago

@p-laranjinha It works, thank you so much!!!! Nearly every note I created has custom svg in the headings so I've been having a massive headache until now... Thank you thank you thank you ❤️❤️❤️❤️❤️

aidenlx commented 1 year ago

should be fixed in v0.9.7