Open syntaxlexx opened 5 years ago
I agree that this would be nice, but in the meantime, a workaround could be something like this:
in template:
<div class="links">
<span class="facebook">
<facebook :url="url" :scale="scale"></facebook>
</span>
<span class="twitter">
<twitter :url="url" :title="title" :scale="scale"></twitter>
</span>
<span class="linkedin">
<linkedin :url="url" :scale="scale"></linkedin>
</span>
<span class="email">
<email :url="url" :subject="title" :scale="scale"></email>
</span>
</div>
sass:
.links {
display: flex;
align-items: center;
justify-content: center;
> span {
width: 50px;
height: 50px;
cursor: pointer;
&:not(:last-of-type) {
margin-right: 16px;
}
svg {
opacity: 0;
width: 50px;
height: 50px;
}
&.facebook {
background: center / contain no-repeat url('/img/valencia/social/fb.png');
}
&.twitter {
background: center / contain no-repeat url('/img/valencia/social/twitter.png');
}
&.linkedin {
background: center / contain no-repeat url('/img/valencia/social/in.png');
}
&.email {
background: center / contain no-repeat url('/img/valencia/social/mail.png');
}
}
}
It would be very nice if one would be able to override the default buttons. Maybe using slots?