box-ui-elements-mlh/src/icons/general/IconCreditCardVisa.js.flow

Box UI Elements

// @flow
import * as React from 'react';

import AccessibleSVG from '../accessible-svg';

type Props = {
    className?: string,
    color?: string,
    height?: number,
    opacity?: number,
    /** A text-only string describing the icon if it's not purely decorative for accessibility */
    title?: string | React.Element<any>,
    width?: number,
};

const IconCreditCardVisa = ({
    className = '',
    color = '#979797',
    height = 16,
    opacity = 1,
    title,
    width = 25,
}: Props) => (
    <AccessibleSVG
        className={`icon-credit-card-visa ${className}`}
        height={height}
        opacity={opacity}
        title={title}
        viewBox="0 0 25 16"
        width={width}
    >
        <g fill="none" fillRule="evenodd">
            <rect height="15" rx="2" stroke={color} width="24" x=".5" y=".5" />
            <path
                d="M9.880632 10.435615l.80935-4.949618h1.294397l-.809897 4.949618h-1.29385zm5.988483-4.82778l-.17548 1.072734-.115984-.05708c-.238884-.100314-.54545-.196456-.968727-.18963-.506788 0-.741306.21997-.741306.42572-.00291.231822.27418.384663.72666.61364.746673.353186 1.091627.78175 1.086714 1.34476-.010096 1.027413-.893313 1.691022-2.254026 1.691022-.580382-.006163-1.139476-.125915-1.441857-.26406l.181665-1.108006.166837.078697c.425097.184794.700277.259792 1.218345.259792.372063 0 .771235-.15161.77442-.483366.002455-.216653-.16702-.37139-.670806-.613927-.49096-.236752-1.141388-.633552-1.1342-1.344758C12.52901 6.07129 13.430056 5.4 14.70899 5.4c.501874 0 .903684.10752 1.160125.207834zm3.319182-.117097l1.04769 4.94649h-1.201063s-.118806-.56851-.157558-.741738c-.18876 0-1.509083-.002085-1.657636-.002085-.050305.133878-.272543.743822-.272543.743822H15.58793l1.922355-4.536036c.13609-.32237.36797-.410452.67781-.410452h1.000202zm-1.59605 3.190234c.10698-.285203.515704-1.383633.515704-1.383633-.007732.01318.106252-.28653.171568-.472368l.087512.42676s.24789 1.18149.299652 1.42924h-1.074434zM8.79501 5.4896h1.371083L8.1283 10.429736l-1.369538.001612L5.6 6.102673c.821813.428847 1.556842 1.2855 1.792724 2.076255l.134998.685985L8.79501 5.4896z"
                fill={color}
            />
            <path
                d="M4.326556 5.5L4.31 5.60297c1.623886.409694 2.647997 1.406564 3.094018 2.596205L7.000496 5.91785c-.078415-.31346-.305655-.406946-.58675-.41785h-2.08719z"
                fill={color}
                opacity=".5"
            />
        </g>
    </AccessibleSVG>
);

export default IconCreditCardVisa;