vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
13.25k stars 2.14k forks source link

[Feature request] Ability to use images in customer containers' custom title #4214

Open thdoan opened 2 months ago

thdoan commented 2 months ago

Is your feature request related to a problem? Please describe.

Sometimes emojis don't cut it, so it would be awesome to have the ability to use images in customer containers' custom title.

Describe the solution you'd like

::: tip ![custom tip icon](/tip.svg) TIP
This is a tip.
:::

Describe alternatives you've considered

No response

Additional context

No response

Validations

rvanhorn commented 1 month ago

This is something I'd also like to see added.

In the meantime ,you can manually add an icon via CSS.

.tip > .custom-block-title::before {
    content: '';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--vp-c-text-1);
    -webkit-mask-image: url('/images/info.svg');
    mask-image: url('/images/info.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-right: 0.5rem;
    vertical-align: middle;
}

image