Skip to content

Link Component 

<a href="#" class="more">Go to project</a>

This is the bare minimum for a static svg icon after the link text.

.more {
  @apply flex items-center;
}

.more:after {
  @apply w-[18px] h-[18px];
  content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.15 8a.61.61 0 0 1-.18.47L8.47 15a.66.66 0 0 1-.47.17.68.68 0 0 1-.47-.17.63.63 0 0 1 0-.94l5.41-5.39H1.5a.68.68 0 0 1-.5-.18A.64.64 0 0 1 .85 8 .63.63 0 0 1 1 7.55a.64.64 0 0 1 .47-.18h11.47L7.53 2a.665.665 0 1 1 .94-.94l6.5 6.5a.6.6 0 0 1 .18.44z" fill="white"/></svg>');
}

The following example has a hover animation with the icon moving to the right, and everything has an opacity applied.

The justify-between is only needed if the icon is to be pushed to the right of the container. In that case add shink-0 to avoid shrinking the icon when the text pushes up against it.

.more {
  @apply flex items-center justify-between hover:opacity-70 transition-opacity;
}

.more:after {
  @apply transition transform shrink-0 w-4 h-4;
  content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.15 8a.61.61 0 0 1-.18.47L8.47 15a.66.66 0 0 1-.47.17.68.68 0 0 1-.47-.17.63.63 0 0 1 0-.94l5.41-5.39H1.5a.68.68 0 0 1-.5-.18A.64.64 0 0 1 .85 8 .63.63 0 0 1 1 7.55a.64.64 0 0 1 .47-.18h11.47L7.53 2a.665.665 0 1 1 .94-.94l6.5 6.5a.6.6 0 0 1 .18.44z" fill="white"/></svg>');
}

.more:hover:after {
  @apply translate-x-1;
}

SVG notes

The inline svg code must not have any line breaks.

SVG code must not have any # symbols (for example in the fill color), instead use something like fill="rgb(50, 50, 50)". Use a hex to rgb converter.

Export the SVG so the vectors reach the edge of the viewBox. Then remove the width="" and height="". The size of the SVG can then be controlled with the css, in the above example with w-4 h-4.

The height of .more:after should match the lineheight of the text (this will help center align the icon), then use the width to control the size of the icon.

Stripe button

Subtle animation. Via https://twitter.com/adamwathan/status/1571175551393730560

Finished results https://play.tailwindcss.com/paQYuuU1JB