import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';

const Hackster = forwardRef(function Hackster(
  { color = 'currentColor', size = 24, title = 'Hackster', ...others },
  ref
) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      fill={color}
      viewBox="0 0 24 24"
      ref={ref}
      {...others}>
      <title>{title}</title>
      <path d="M18.425 10.349c.262 0 .48.209.48.479v2.155c0 .32.26.582.58.582h4.26c.295 0 .355.426.068.504l-8.568 2.468c-.248.073-.509-.068-.581-.317-.013-.043-.021-.088-.019-.133v-2.252c-.002-.115-.094-.209-.209-.21H5.042c-.114-.001-.207-.093-.209-.207v-2.53c.001-.353-.28-.643-.634-.65l-3.998-.07c-.235-.01-.278-.34-.052-.408l8.76-2.529c.111-.029.225.037.254.146.004.016.007.033.007.053v2.441c0 .26.217.478.479.478h8.776zM8.788 4.543c.305-.052.375.348.375.348s.025.947 0 1.338c-.027.39-.383.375-.383.375H5.304s-.315-.113-.357-.522c-.053-.408.434-.636.434-.636s3.104-.851 3.405-.903h.002zm5.885-1.104s-.045-.461.471-.66c.512-.191 3.268-.904 3.268-.904s.512-.2.547.471c.035.668 0 6.178 0 6.178s.018.451-.469.486c-.488.035-3.225 0-3.225 0s-.592.053-.592-.417V3.439zm.078 14.332c.025-.391.383-.375.375-.384h3.475s.305.113.357.522c.053.408-.436.635-.436.635s-3.102.851-3.406.902c-.305.062-.365-.339-.365-.339s-.025-.945 0-1.336zm-5.518 2.79s.051.461-.471.66c-.513.19-3.268.903-3.268.903s-.514.201-.547-.47c-.035-.668 0-6.178 0-6.178s-.018-.451.469-.486 3.225 0 3.225 0 .529-.053.592.417c.059.46 0 .79 0 .79v4.364z" />
    </svg>
  );
});

Hackster.propTypes = {
  /**
   * Hex color or color name
   */
  color: PropTypes.string,
  /**
   * The size of the Icon.
   */
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  /**
   * The title provides an accessible short text description to the SVG
   */
  title: PropTypes.string,
};

export default Hackster;
