Hello <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-ur

Adding a new social icon for Mastodon about astro-paper HOT 2 CLOSED

satnaing commented on July 24, 2024

Adding a new social icon for Mastodon

from astro-paper.

Comments (2)

jschuur commented on July 24, 2024 1

So, this is my svg value.

Thanks for the quick reply! Looks like a few small differences like the viewbox in the SVG markup made the difference and it works for me now too. Thanks!

from astro-paper.

satnaing commented on July 24, 2024

Hello @jschuur

Your works in src/config.ts and src/types.ts seem to be fine.
The problem is your svg value in src/assets/socialIcons.ts.

I tried testing with the svg downloaded from svgrepo (which you provided) and tweaked a little bit. I think it looks okay now.

So, this is my svg value.

const socialIcons: SocialIcons = {
  // other social icons ...
  Mastodon: `<svg class="icon-tabler" viewBox="-10 -5 1034 1034" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <path fill="currentColor"
  d="M499 112q-93 1 -166 11q-81 11 -128 33l-14 8q-16 10 -32 25q-22 21 -38 47q-21 33 -32 73q-14 47 -14 103v37q0 77 1 119q3 113 18 188q19 95 62 154q50 67 134 89q109 29 210 24q46 -3 88 -12q30 -7 55 -17l19 -8l-4 -75l-22 6q-28 6 -57 10q-41 6 -78 4q-53 -1 -80 -7
  q-43 -8 -67 -30q-29 -25 -35 -72q-2 -14 -2 -29l25 6q31 6 65 10q48 7 93 9q42 2 92 -2q32 -2 88 -9t107 -30q49 -23 81.5 -54.5t38.5 -63.5q9 -45 13 -109q4 -46 5 -97v-41q0 -56 -14 -103q-11 -40 -32 -73q-16 -26 -38 -47q-15 -15 -32 -25q-12 -8 -14 -8
  q-46 -22 -127 -33q-74 -10 -166 -11h-3zM367 267q73 0 109 56l24 39l24 -39q36 -56 109 -56q63 0 101 43t38 117v239h-95v-232q0 -74 -61 -74q-69 0 -69 88v127h-94v-127q0 -88 -69 -88q-61 0 -61 74v232h-95v-239q0 -74 38 -117t101 -43z" />
  </svg>`,
};