feat: support the custom svg icon in sidebar. add follow link.

options.ts

@@ -145,10 +145,10 @@ const options: z.input<typeof Options> = {
       link: 'https://github.com/syhily',
     },
     {
-      name: '知乎',
-      icon: 'icon-zhihu-square-fill',
+      name: 'Follow',
+      icon: '<svg viewBox="0 0 83 80"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(0.6377, 0.6948)" fill="#FFFFFF" fill-rule="nonzero"><path d="M70.9713,-7.10542736e-15 L20.9446,-7.10542736e-15 C14.895,-7.10542736e-15 9.9907,4.8998 9.9907,10.944 C9.9907,16.9882 14.895,21.888 20.9446,21.888 L70.9713,21.888 C77.0213,21.888 81.9253,16.9882 81.9253,10.944 C81.9253,4.8998 77.0213,-7.10542736e-15 70.9713,-7.10542736e-15 Z" id="Path"></path><path d="M44.2971,28.4541 L10.9539,28.4541 C4.9042,28.4541 -7.10542736e-15,33.3539 -7.10542736e-15,39.3981 C-7.10542736e-15,45.4423 4.9042,50.3421 10.9539,50.3421 L44.2971,50.3421 C50.3468,50.3421 55.2511,45.4423 55.2511,39.3981 C55.2511,33.3539 50.3468,28.4541 44.2971,28.4541 Z" id="Path"></path><path d="M47.5231,67.8762 C47.5231,61.8324 42.6188,56.9326 36.5691,56.9326 C30.5195,56.9326 25.6152,61.8324 25.6152,67.8762 C25.6152,73.9212 30.5195,78.8202 36.5691,78.8202 C42.6188,78.8202 47.5231,73.9212 47.5231,67.8762 Z" id="Path"></path></g></g></svg>',
       type: 'link',
-      link: 'https://www.zhihu.com/people/syhily',
+      link: 'https://app.follow.is/share/feeds/54772566650461214',
     },
     {
       name: '微信',

src/assets/styles/globals.css

@@ -548,6 +548,10 @@
   justify-content: center;
 }
 
+.btn-icon span svg {
+  margin: 28%;
+}
+
 .btn-icon:hover,
 .btn-icon:active,
 .btn-icon:focus {
@@ -579,39 +583,6 @@
   font-size: 1.325rem;
 }
 
-.btn-icon .icon-status {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-}
-
-.icon-status {
-  display: block;
-  font-size: 11px;
-  line-height: 1;
-  min-width: 20px;
-  margin: 1px;
-  padding: 2px 3px;
-  border-radius: var(--radius-lg);
-  color: #fff;
-  background-color: var(--bg-danger);
-}
-
-.icon-status.status-top {
-  left: 0;
-  top: 0;
-}
-
-.icon-status.status-right {
-  left: auto;
-  top: 0;
-  right: 0;
-  -webkit-transform: translate(50%, -50%);
-  -ms-transform: translate(50%, -50%);
-  transform: translate(50%, -50%);
-}
-
 @media (max-width: 767.98px) {
   .btn-icon.btn-md {
     width: 2.125rem;

src/components/header/Header.astro

@@ -127,7 +127,11 @@ import options from '@/options';
                 class="btn btn-dark btn-icon btn-circle button-social"
               >
                 <span>
+                  {!social.icon.startsWith('<svg') ? (
                     <i class={`iconfont ${social.icon}`} />
+                  ) : (
+                    <Fragment set:html={social.icon} />
+                  )}
                 </span>
               </a>
             );