Component

SocialLink

A small collection of handy icons that 99% of the website would have at least one. Since Material-UI does not provide these icons, so I download free icons from FontAwesome 5 and put it in this library.

Facebook
FacebookCircle
FacebookSquare
Twitter
TwitterSquare
Instagram
InstagramSquare
Envelope
EnvelopeSquare
GithubCircle
GithubSquare
GooglePlus
GooglePlusCircle
GooglePlusSquare
Pinterest
PinterestCircle
PinterestSquare
LinkedIn
LinkedInSquare
Dribbble
DribbbleSquare

Usage

import { SocialLink, SocialProvider } from '@mui-treasury/components/socialLink';

function App() {
  return (
    <SocialProvider>
      <SocialLink
        brand="Facebook"
        href="your-url"
      />
    <SocialProvider>
  )
}

SocialProvider does not render any html tag. It provides default and custom style to SocialLink

Custom style

Create a useStyles hook with { anchor, icon } and provide to SocialLinkProvider (default styles will be removed).

import makeStyles from '@material-ui/core/styles/makeStyles';
import { SocialLink, SocialProvider } from '@mui-treasury/components/socialLink';

const useStyles = makeStyles({
  anchor: {
    display: 'inline-flex',
    alignItems: 'center',
    padding: 8,
  },
  icon: {
    color: 'red'
  }
})

function App() {
  return (
    <SocialProvider useStyles={useStyles}>
      <SocialLink
        brand="Facebook"
        href="your-url"
      />
    <SocialProvider>
  )
}

Predefined styles

In case you are lazy and in a hurry, you can use one of these styles from SocialLink styles page. Usage is super simple, just import and provide to SocialLinkProvider. Done, Happy treasuring!

import { SocialLink, SocialProvider } from '@mui-treasury/components/socialLink';
import { useRoundSocialLinkStyles } from '@mui-treasury/styles/socialLink/round';

function App() {
  return (
    <SocialProvider useStyles={useRoundSocialLinkStyles}>
      <SocialLink
        brand={'FacebookCircle'}
        href={'https://www.facebook.com/siriwat.kunaporn/'}
      />
      <SocialLink brand={'Twitter'} href={'https://twitter.com/siriwatknp'} />
      <SocialLink
        brand={'Instagram'}
        href={''}
      />
      <SocialLink
        brand={'LinkedIn'}
        href={'https://www.linkedin.com/in/siriwat-kunaporn-1b4095158/'}
      />
      <SocialLink
        brand={'GithubCircle'}
      />
    <SocialProvider>
  )
}

Don’t forget to star this project if you like! Mui Treasury Github