networksocialcomponent v0.0.2

WebComponent Social Media

This project has the component principal the social media for new template 2.0 Uniandes, yours characteristics are the next:

Use

Use npm package manager and execute following command:

  npm i networksocialcomponent

1. Then import social-media-component tag in your main module.

  <social-media-component data=''></social-media-component>

2. Then use the object array data='' in your project.

    [
      {
        "href": "https://www.facebook.com/",
        "img": true,
        "title": "facebook",
        "imgbase": {
          "src": "https://cdn1.iconfinder.com/data/icons/social-media-rounded-corners/512/Rounded_Facebook_svg-512.png",
          "alt": "alt img 1"
        },
        "imghover": {
          "src": "https://cdn1.iconfinder.com/data/icons/social-media-2285/512/Colored_Facebook3_svg-512.png",
          "alt": "alt img 2"
        },
        "attributes": {
          "id": "click-me",
          "target": "_blank"
        }
      },
      {
        "href": "https://www.instagram.com/",
        "img": true,
        "title": "instagram",
        "imgbase": {
          "src": "https://cdn1.iconfinder.com/data/icons/social-media-rounded-corners/512/Rounded_Instagram_svg-128.png",
          "alt": "alt img 1"
        },
        "imghover": {
          "src": "https://cdn2.iconfinder.com/data/icons/social-media-applications/64/social_media_applications_3-instagram-128.png",
          "alt": "alt img 2"
        },
        "attributes": {
          "id": "click-me",
          "target": "_blank"
        }
      },
      {
        "href": "https://twitter.com/home",
        "img": true,
        "title": "twitter",
        "imgbase": {
          "src": "https://cdn1.iconfinder.com/data/icons/social-media-rounded-corners/512/Rounded_Twitter5_svg-128.png",
          "alt": "alt img 1"
        },
        "imghover": {
          "src": "https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Twitter3_colored_svg-512.png",
          "alt": "alt img 2"
        },
        "attributes": {
          "id": "click-me",
          "target": "_blank"
        }
      },
      {
        "href": "https://www.linkedin.com/feed/",
        "img": true,
        "title": "linkedin",
        "imgbase": {
          "src": "https://cdn3.iconfinder.com/data/icons/social-media-black-white-2/512/BW_Linkedin_glyph_svg-128.png",
          "alt": "alt img 1"
        },
        "imghover": {
          "src": "https://cdn3.iconfinder.com/data/icons/social-network-flat-3/100/LinkedIn-512.png",
          "alt": "alt img 2"
        },
        "attributes": {
          "id": "click-me",
          "target": "_blank"
        }
      },
      {
        "href": "https://www.youtube.com/",
        "img": true,
        "title": "youtube",
        "imgbase": {
          "src": "https://cdn1.iconfinder.com/data/icons/social-media-rounded-corners/512/Rounded_Youtube3_svg-512.png",
          "alt": "alt img 1"
        },
        "imghover": {
          "src": "https://cdn1.iconfinder.com/data/icons/material-apps/512/icon-youtube-material-design-512.png",
          "alt": "alt img 2"
        },
        "attributes": {
          "id": "click-me",
          "target": "_blank"
        }
      }
    ]

© 2022