@drivy/cobalt/components/Icon/svgrTemplate.js

Opinionated design system for Drivy's projects.

import { __webpack_require__ } from "../../rslib-runtime.js";
__webpack_require__.add({
    "./src/components/Icon/svgrTemplate.js" (module) {
        const svgrTemplate = ({ _imports, interfaces, componentName, _props, jsx, exports }, { tpl })=>{
            const source = componentName.replace("Svg", "").replace(/^(.)/, (c)=>c.toLowerCase());
            exports[0].declaration.name = `${exports[0].declaration.name.replace("Svg", "")}Icon`;
            const iconComponentName = `${componentName.replace("Svg", "")}Icon`;
            jsx.children.unshift({
                type: "JSXElement",
                openingElement: {
                    type: "JSXOpeningElement",
                    name: {
                        type: "JSXIdentifier",
                        name: "title"
                    },
                    attributes: [],
                    selfClosing: false
                },
                closingElement: {
                    type: "JSXClosingElement",
                    name: {
                        type: "JSXIdentifier",
                        name: "title"
                    }
                },
                children: [
                    {
                        type: "JSXExpressionContainer",
                        expression: {
                            type: "JSXIdentifier",
                            name: "iconSource"
                        }
                    }
                ]
            });
            return tpl`
import { IconColorsType } from "../"
import { camelize } from "../../utils"
import cx from "classnames"

export type IconProps = {
  color?: IconColorsType
  size?: 16 | 20 | 24 | 32
  contained?: boolean
  className?: string
}

${interfaces}

const iconSource = "${source}"

const ${iconComponentName} = ({
  color,
  size = 24,
  contained = false,
  className,
}: IconProps) => {
  const computedClassName = cx(
    className,
    \`cobalt-Icon cobalt-Icon--\${iconSource}\`,
    {
      [\`c-fill-\${camelize(color || "")}\`]: color,
      "cobalt-Icon--size16": size === 16,
      "cobalt-Icon--size20": size === 20,
      "cobalt-Icon--size32": size === 32,
      "cobalt-Icon--contained": contained,
    }
  )

  return (
    <span className={computedClassName}>
      {${jsx}}
    </span>
  )
}

${exports}
`;
        };
        module.exports = svgrTemplate;
    }
});
__webpack_require__("./src/components/Icon/svgrTemplate.js");

//# sourceMappingURL=svgrTemplate.js.map