{"size": 653, "ext": "js", "max_stars_repo_path": "cat-breeds-nextjs/src/components/SvgGradient.js", "max_stars_repo_name": "videoeero/cat-breeds-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "cat-breeds-nextjs/src/components/SvgGradient.js", "max_issues_repo_name": "videoeero/cat-breeds-app", "max_issues_repo_issues_event_min_datetime": "2021-03-10T10:07:44.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-13T07:39:41.000Z", "max_forks_repo_path": "cat-breeds-nextjs/src/components/SvgGradient.js", "max_forks_repo_name": "videoeero/cat-breeds-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 32.65, "max_line_length": 133, "alphanum_fraction": 0.6676875957}
import React from 'react';

/**
 * Renders a helper component to define gradients to SVG icon images. In this project added to footer to be accessibile on all pages.
 * @param {String} color for defining the gradients color. The colors are defined in _icon.scss style file
 */

export function SvgGradient({ color }) {
  return (
    <svg className='svgGradient' aria-hidden='true' focusable='false'>
      <linearGradient id={`icon-gradient-${color}`} x2='1' y2='0'>
        <stop offset='0%' stopColor='var(--color-1)' />
        <stop offset='100%' stopColor='var(--color-2)' />
      </linearGradient>
    </svg>
  );
}

export default SvgGradient;
