@zendeskgarden/react-loaders/dist/esm/styled/StyledSVG.js

Components relating to loaders in the Garden Design System

/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
import styled, { css } from 'styled-components';
import { getValueAndUnit } from 'polished';
import { componentStyles, getColor } from '@zendeskgarden/react-theming';

const colorStyles = _ref => {
  let {
    theme,
    $color = 'inherit'
  } = _ref;
  const options = $color.includes('.') ? {
    variable: $color,
    theme
  } : {
    hue: $color,
    theme
  };
  return css(["color:", ";"], getColor(options));
};
const sizeStyles = _ref2 => {
  let {
    $containerWidth = '1em',
    $containerHeight = '0.9em',
    $fontSize = 'inherit'
  } = _ref2;
  const [value, unit] = getValueAndUnit($fontSize);
  let fontSize;
  if (unit === undefined) {
    fontSize = $fontSize;
  } else {
    fontSize = `${value}${unit === '' ? 'px' : unit}`;
  }
  return css(["width:", ";height:", ";font-size:", ";"], $containerWidth, $containerHeight, fontSize);
};
const StyledSVG = styled.svg.attrs(props => ({
  'data-garden-version': '9.5.3',
  xmlns: 'http://www.w3.org/2000/svg',
  focusable: 'false',
  viewBox: `0 0 ${props.$width} ${props.$height}`,
  role: 'img'
})).withConfig({
  displayName: "StyledSVG",
  componentId: "sc-1xtc3kx-0"
})(["", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);

export { StyledSVG };