add icon on custom container

website/.vitepress/theme/custom.css

@@ -4,8 +4,24 @@
   --vp-c-brand-1: var(--ifm-color-primary);
   --vp-c-brand-2: var(--ifm-color-primary);
   --vp-c-brand-3: var(--ifm-color-primary);
+
+  --vp-icon-info: #3b82f6;
+  --vp-icon-tip: #10b981;
+  --vp-icon-warning: #f59e0b;
+  --vp-icon-danger: #ef4444;
+  --vp-icon-details: #6b7280;
 }
 
+
+.dark {
+  --vp-icon-info: #93c5fd;
+  --vp-icon-tip: #34d399;
+  --vp-icon-warning: #fbbf24;
+  --vp-icon-danger: #f87171;
+  --vp-icon-details: #9ca3af;
+}
+
+
 img[src*='shields.io'] {
   display: inline;
   vertical-align: text-bottom;
@@ -48,3 +64,85 @@ img[src*='custom-icon-badges.demolab.com'] {
 .blog-post:nth-of-type(3) {
   animation-delay: 0.3s;
 }
+
+
+.custom-block .custom-block-title::before {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.custom-block.info .custom-block-title::before {
+  background-color: var(--vp-icon-info);
+  -webkit-mask-image: url('./icons/info.svg');
+  mask-image: url('./icons/info.svg');
+}
+
+.custom-block.tip .custom-block-title::before {
+  background-color: var(--vp-icon-tip);
+  -webkit-mask-image: url('./icons/tip.svg');
+  mask-image: url('./icons/tip.svg');
+}
+
+.custom-block.warning .custom-block-title::before {
+  background-color: var(--vp-icon-warning);
+  -webkit-mask-image: url('./icons/warning.svg');
+  mask-image: url('./icons/warning.svg');
+}
+
+.custom-block.danger .custom-block-title::before {
+  background-color: var(--vp-icon-danger);
+  -webkit-mask-image: url('./icons/danger.svg');
+  mask-image: url('./icons/danger.svg');
+}
+
+.custom-block.details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+
+.custom-block .custom-block-title {
+  display: flex;
+  align-items: center;
+}
+
+
+@supports not (mask-image: none) {
+  .custom-block .custom-block-title::before,
+  .custom-block.details summary::before {
+    font-size: 18px;
+    width: auto;
+    height: auto;
+    background: none !important;
+    -webkit-mask: none !important;
+    mask: none !important;
+  }
+
+  .custom-block.info .custom-block-title::before {
+    content: 'ℹ️';
+  }
+
+  .custom-block.tip .custom-block-title::before {
+    content: '💡';
+  }
+
+  .custom-block.warning .custom-block-title::before {
+    content: '⚠️';
+  }
+
+  .custom-block.danger .custom-block-title::before {
+    content: '🔥';
+  }
+
+}

website/.vitepress/theme/icons/danger.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+  <path d="M7.998 14.5c2.832 0 5-1.98 5-4.5 0-1.463-.68-2.19-1.879-3.383l-.036-.037c-1.013-1.008-2.3-2.29-2.834-4.434-.322.256-.63.579-.864.953-.432.696-.621 1.58-.046 2.73.473.947.67 2.284-.278 3.232-.61.61-1.545.84-2.403.633a2.788 2.788 0 0 1-1.436-.874A3.21 3.21 0 0 0 3 10c0 2.53 2.164 4.5 4.998 4.5zM9.533.753C9.496.34 9.16.009 8.77.146 7.035.75 4.34 3.187 5.997 6.5c.344.689.285 1.218.003 1.5-.419.419-1.54.487-2.04-.832-.173-.454-.659-.762-1.035-.454C2.036 7.44 1.5 8.702 1.5 10c0 3.512 2.998 6 6.498 6s6.5-2.5 6.5-6c0-2.137-1.128-3.26-2.312-4.438-1.19-1.184-2.436-2.425-2.653-4.81z"/>
+</svg>

website/.vitepress/theme/icons/info.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
+</svg>

website/.vitepress/theme/icons/tip.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+  <path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"/>
+</svg>

website/.vitepress/theme/icons/warning.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+  <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/>
+</svg>

website/src/docs/experiments/template.md

@@ -33,5 +33,5 @@ information.
 
 \{Short explanation of how users should migrate to the new behavior\}
 
-[enabling-experiments]: /experiments#enabling-experiments
+[enabling-experiments]: /experiments/#enabling-experiments