vue-socialmedia-share icon indicating copy to clipboard operation
vue-socialmedia-share copied to clipboard

Ability to Override Default Content

Open syntaxlexx opened this issue 4 years ago • 1 comments

It would be very nice if one would be able to override the default buttons. Maybe using slots?

syntaxlexx avatar Aug 22 '19 15:08 syntaxlexx

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');
        }
    }
}

gTerrusa avatar Feb 02 '21 19:02 gTerrusa