Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new prop to Icon Components #11

Open
oddFEELING opened this issue Apr 22, 2022 · 0 comments
Open

Add new prop to Icon Components #11

oddFEELING opened this issue Apr 22, 2022 · 0 comments
Labels
enhancement New feature or request

Comments

@oddFEELING
Copy link
Contributor

Adding the className prop to icons allows adding hover effects and other interactivity on icons. I already added to the few used in the profile page.

/**
 * Icon Component
 *
 * @name LinkedinIcon
 * @param {String} fill - Icon fill color
 * @param {Number} width - Icon width
 * @param {Height} height - Icon height
 * @param {String | Object} className - styles
 */
export default function LinkedinIcon({ fill, width, height, className }) {
    return (
        <svg
            width={width ? width : 47}
            height={height ? height : 47}
            viewBox="0 0 47 47"
            fill="none"
            className={className ? className : ""}
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M41.7778 0C43.1628 0 44.4911 0.550197 45.4704 1.52955C46.4498 2.50891 47 3.8372 47 5.22222V41.7778C47 43.1628 46.4498 44.4911 45.4704 45.4704C44.4911 46.4498 43.1628 47 41.7778 47H5.22222C3.8372 47 2.50891 46.4498 1.52955 45.4704C0.550197 44.4911 0 43.1628 0 41.7778V5.22222C0 3.8372 0.550197 2.50891 1.52955 1.52955C2.50891 0.550197 3.8372 0 5.22222 0H41.7778ZM40.4722 40.4722V26.6333C40.4722 24.3758 39.5754 22.2106 37.979 20.6143C36.3827 19.0179 34.2176 18.1211 31.96 18.1211C29.7406 18.1211 27.1556 19.4789 25.9022 21.5156V18.6172H18.6172V40.4722H25.9022V27.5994C25.9022 25.5889 27.5211 23.9439 29.5317 23.9439C30.5012 23.9439 31.431 24.329 32.1165 25.0146C32.8021 25.7001 33.1872 26.6299 33.1872 27.5994V40.4722H40.4722ZM10.1311 14.5178C11.2945 14.5178 12.4103 14.0556 13.233 13.233C14.0556 12.4103 14.5178 11.2945 14.5178 10.1311C14.5178 7.70278 12.5594 5.71833 10.1311 5.71833C8.96077 5.71833 7.83836 6.18325 7.01081 7.01081C6.18325 7.83836 5.71833 8.96077 5.71833 10.1311C5.71833 12.5594 7.70278 14.5178 10.1311 14.5178ZM13.7606 40.4722V18.6172H6.52778V40.4722H13.7606Z"
                fill={fill ? fill : "#03A9F4"}
            />
        </svg>
    );
}
@oddFEELING oddFEELING added the enhancement New feature or request label Apr 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant