javalent / admonitions

Adds admonition block-styled content to Obsidian.md
MIT License
1.04k stars 67 forks source link

[Bug]: Adding Custom Admonition #311

Closed HippyCraig closed 9 months ago

HippyCraig commented 1 year ago

Check for existing bug reports before submitting.

Expected Behavior

I expect the icon selection to accept the svg file I selected.

Current behaviour

It sort of appears to accept it but leaves the text field blank. If you look at the red box you can see an outline of the shape of my SVG icon but I cant save the dialog box as there is an error on the form

image

Reproduction

Select an SVG file, the preview sort of updates with a shadow shape of hte SVG I selected but I cant save the form

Which Operating Systems are you using?

Obsidian Version Check

1.3.5 and 1.3.4

Plugin Version

9.3.1

Confirmation

Possible solution

No response

stale[bot] commented 11 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

HippyCraig commented 11 months ago

Any updates?

Aetherinox commented 10 months ago

I also just came across this bug as well. Can't use a custom icon, locks me to using only FA or the other two. Went digging in the code, and with the custom option currently broke, the only way to implement a custom icon is to hardcode it into the js file with the SVG path.

HippyCraig commented 9 months ago

Thanks for the info, I started making my own using CSS I found that you can actually put the SVG code inside the CSS file directly, and that seems to work out real well since one update in the file will propgate through my notes. Heres one I use for PowerShell scripts /* Custom PowerShell */ .callout[data-callout="file-type-powershell"] { --callout-title-color: var(--callout-type-basic-darkcolor); --callout-color: var(--callout-type-basic-lightcolor); --callout-icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 210" style="height: 25px; width: 25px;"> <g transform="translate(2,4)" clip-rule="evenodd" fill-rule="evenodd"> <path d="m-47.547 226.87c0-97.129 0.094-194.26-0.195-291.39-0.021-6.982 1.404-8.411 8.388-8.389 94.397 0.292 188.8 0.292 283.2 0 6.984-0.022 8.41 1.407 8.389 8.389-0.289 97.128-0.195 194.26-0.195 291.39-3.238 2.008-6.837 1.129-10.268 1.131-93.015 0.049-186.03 0.049-279.05 0-3.431-2e-3 -7.03 0.877-10.267-1.131z" display="none" fill="#2671be"/> <path d="m120.14 0.032c23.011-8e-3 46.023-0.078 69.034 0.019 13.68 0.056 17.537 4.627 14.588 18.137-8.636 39.566-17.466 79.092-26.415 118.59-2.83 12.484-9.332 17.598-22.465 17.637-46.023 0.137-92.046 0.152-138.07-6e-3 -15.043-0.053-19-5.148-15.759-19.404 8.794-38.717 17.635-77.422 26.547-116.11 3.395-14.744 8.497-18.792 23.502-18.835 23.012-0.065 46.024-0.017 69.036-0.025z" fill="#e0eaf5"/> <path d="m85.365 149.81c-23.014-8e-3 -46.029 0.098-69.042-0.053-11.67-0.076-13.792-2.83-11.165-14.244 8.906-38.71 18.099-77.355 26.807-116.11 2.335-10.394 7.372-14.988 18.508-14.885 46.024 0.427 92.056 0.137 138.08 0.184 11.543 0.011 13.481 2.48 10.89 14.187-8.413 38.007-16.879 76.003-25.494 113.96-3.224 14.207-6.938 16.918-21.885 16.951-22.234 0.047-44.469 0.012-66.702 4e-3z" fill="#2671be"/> <path d="m104.95 73.951c-1.543-1.81-3.237-3.894-5.031-5.886-10.173-11.3-20.256-22.684-30.61-33.815-4.738-5.094-6.248-10.041-0.558-15.069 5.623-4.97 11.148-4.53 16.306 1.188 14.365 15.919 28.713 31.856 43.316 47.556 5.452 5.864 4.182 9.851-1.823 14.196-23.049 16.683-45.968 33.547-68.862 50.443-5.146 3.799-10.052 4.75-14.209-0.861-4.586-6.189-0.343-9.871 4.414-13.335 17.013-12.392 33.993-24.83 50.9-37.366 2.355-1.746 5.736-2.764 6.157-7.051z" fill="#fdfdfe"/> <path d="m112.24 133.82c-6.196 0-12.401 0.213-18.583-0.068-4.932-0.223-7.9-2.979-7.838-8.174 0.06-4.912 2.536-8.605 7.463-8.738 13.542-0.363 27.104-0.285 40.651-0.02 4.305 0.084 7.483 2.889 7.457 7.375-0.031 5.146-2.739 9.133-8.25 9.465-6.944 0.42-13.931 0.104-20.899 0.104-1e-3 0.017-1e-3 0.037-1e-3 0.056z" fill="#fcfdfd"/> </g> </svg>; }

The SVG code is usally on one line, but this box text wraps so its not so elegant to read unless you copy and paste it out.