Custom Admonition Icon: Resize and Center Vertically

[baur]

Description

Custom icon for Admonition too small and not centrated by vertical

Cutom:

Default:

Visual comparing

Your environment

• Docusaurus version used: 3.4
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome, Node v20
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Win10

[slorber]

Agee there is something wrong happening here

If the icon is smaller, it should stay aligned

Apparently it's not the case:

Note: we had a previously slightly related PR here: https://github.com/facebook/docusaurus/pull/8150

[malik-na]

I reviewed the code and here are my observations:

1. Because the icons are SVGs, you can't always center them using CSS on their wrapper element.
2. SVG's dimensions need to be defined properly, i.e, x-axis, y-axis in viewBox and height and width in viewPort

3. If the SVG dimesions are fixed, we can even remove the additional margin at the bottom (if required).

I would like to fix this but unfortunately couldn't locate the custom Icons, you mentioned above, in the repository.

[baur]

This was emoji 💡

<Admonition type="tip" icon="💡" title="Did you know...">
  Use plugins to introduce shorter syntax for the most commonly used JSX
  elements in your project.
</Admonition>

[SamuvelRaja]

is this issue open?

[Shahab-16]

/assign