fix(web): lucide icons

modrinth · Aug 27, 2024 · 3039f06 · 3039f06
1 parent 088920e
commit 3039f06
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
@@ -1191,6 +1191,7 @@ select {
   margin-bottom: 16px;
   color: inherit;
   border-left: 0.25em solid #888;
+  border-radius: 0.25rem;
 }
 
 .markdown-alert > :first-child {
@@ -1213,7 +1214,8 @@ select {
   display: inline-block;
   overflow: visible !important;
   vertical-align: text-bottom;
-  fill: currentColor;
+  height: 1.2em;
+  width: 1.2em;
 }
 
 .markdown-alert.markdown-alert-note {

diff --git a/packages/utils/parse.ts b/packages/utils/parse.ts
@@ -25,8 +25,19 @@ export const configuredXss = new FilterXSS({
     source: ['media', 'sizes', 'src', 'srcset', 'type'],
     p: [...(whiteList.p || []), 'align'],
     div: [...(whiteList.p || []), 'align'],
-    svg: ['aria-hidden'],
+    svg: [
+      'aria-hidden',
+      'width',
+      'height',
+      'viewBox',
+      'fill',
+      'stroke',
+      'stroke-width',
+      'stroke-linecap',
+      'stroke-linejoin',
+    ],
     path: ['d'],
+    circle: ['cx', 'cy', 'r'],
   },
   css: {
     whiteList: {
@@ -154,7 +165,18 @@ export const md = (options = {}) => {
     ...options,
   })
 
-  md.use(MarkdownItGitHubAlerts)
+  md.use(MarkdownItGitHubAlerts, {
+    icons: {
+      note: '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
+      tip: '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>',
+      important:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>',
+      warning:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
+      caution:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>',
+    },
+  })
 
   const defaultLinkOpenRenderer =
     md.renderer.rules.link_open ||