Very large icons...

[NickHodges]

I'm getting huge graphics and I'm not sure why.

I'm guessing that I need to set some styles on my side, but thought perhaps you might want to see this.

Thanks for a great Astro integration!

[silent1mezzo]

@NickHodges interesting. Are you using a public theme I could test off of?

My guess is this is because I don't have any global CSS in the package to limit size. I should be able to add this in a day or two

[nemanjam]

Yes, I am getting this too, huge icons and vertical, you should set some inline-flex flex-row and expose class prop so we can customize styles on our own.

Also you should export Props type so we can extend it.

[nemanjam]

I fixed styles like this but all links and intents are broken except for Twitter, it seems this package is not stable enough to be used.

---
import {
  FacebookShareButton,
  HackerNewsShareButton,
  LinkedInShareButton,
  RedditShareButton,
  SocialShare,
  TwitterShareButton,
} from 'astro-social-share';

import { DEFAULT_METADATA } from '@/constants/metadata';
import { CONFIG } from '@/config';

import type { InferProps } from '@/types/utils';

export type Props = Omit<InferProps<typeof SocialShare>, 'buttons'>;

const shareProps = Astro.props;

const { title, description } = DEFAULT_METADATA;
const { SITE_URL } = CONFIG;

const defaultProps = { description, title, via: SITE_URL };

// dont change order because of colors
const buttons = [
  FacebookShareButton,
  TwitterShareButton,
  RedditShareButton,
  LinkedInShareButton,
  HackerNewsShareButton,
];

const props = { ...defaultProps, ...shareProps };

---

<SocialShare {...props} {buttons} />

<style is:global>
  .astro-social-share {
    @apply inline-block space-x-8;
  }

  .social-share-btn {
    @apply inline-block w-10 h-10 !mr-0;

    &:hover {
      filter: brightness(70%);
    }
  }

  /* facebook */
  .social-share-btn:nth-child(1) {
    fill: #1877f2;
  }

  /* twitter */
  .social-share-btn:nth-child(2) {
    fill: #000000;

    /* must target path */
    &:hover path {
      @apply fill-gray-400;
    }
  }

  /* reddit */
  .social-share-btn:nth-child(3) {
    fill: #ff4500;
  }

  /* linkedin */
  .social-share-btn:nth-child(4) {
    fill: #0a66c2;
  }

  /* hackernews */
  .social-share-btn:nth-child(5) {
    fill: #f0652f;
  }
</style>

[silent1mezzo]

@nemanjam I mean, it's being used in production in a number of sites and the links work...

I'll have an update to fix the icon size this week if used without other styling.

[nemanjam]

Some were failing because of localhost, in production is better. But still url arg is ignored for Reddit. Facebook and Linkedin include only link without any additional text (maybe it's about them).

[silent1mezzo]

@nemanjam ya, unfortunately a few of them validate the URL first so localhost fails.

[silent1mezzo]

I just pushed the next version. Not only does this set a default so the icons won't ever display as massive icons, it also allows you to pass in a slot to the component and set your own css. Checkout the readme for an example