TestComponent.tsx

import { jsx as _jsx } from "react/jsx-runtime";
import { addPropertyControls, ControlType } from "framer"; // Available icon names in our icon library

export const iconSvgPaths = {
    "add-emoje": [
        "M12 3.44a8.56 8.56 0 1 0 0 17.12c.967 0 1.895-.16 2.76-.455a.75.75 0 1 1 .483 1.42c-1.019.347-2.11.534-3.243.534C6.444 22.06 1.94 17.556 1.94 12S6.445 1.94 12 1.94 22.06 6.445 22.06 12c0 1.14-.19 2.238-.542 3.262a.75.75 0 1 1-1.419-.486c.298-.87.46-1.803.46-2.776A8.56 8.56 0 0 0 12 3.44",
        "M22.78 20.53a.75.75 0 0 0-.53-1.28h-1.5v-1.5a.75.75 0 1 0-1.5 0v1.5h-1.5a.75.75 0 1 0 0 1.5h1.5v1.5a.75.75 0 1 0 1.5 0v-1.5h1.5a.75.75 0 0 0 .53-.22M8.509 11.224a1.164 1.164 0 1 0 0-2.327 1.164 1.164 0 0 0 0 2.327M15.491 11.224a1.164 1.164 0 1 0 0-2.327 1.164 1.164 0 0 0 0 2.327",
        "M7.746 13.678a.75.75 0 0 1 1.024.274c.692 1.195 1.813 1.953 3.23 1.953s2.538-.758 3.23-1.953a.75.75 0 0 1 1.298.75c-.918 1.589-2.498 2.703-4.528 2.703s-3.61-1.114-4.528-2.702a.75.75 0 0 1 .274-1.025",
    ],
    ai: [
        "m18.523 12.1-4.838-1.782-1.782-4.842a1.492 1.492 0 0 0-2.8 0l-1.784 4.837-4.842 1.78a1.492 1.492 0 0 0 0 2.802l4.836 1.793 1.78 4.839a1.493 1.493 0 0 0 2.802 0l1.781-4.839 4.842-1.78a1.492 1.492 0 0 0 0-2.802zm-5.361 3.181a1.49 1.49 0 0 0-.885.884l-1.78 4.825-1.778-4.828a1.49 1.49 0 0 0-.88-.88L3.013 13.5l4.824-1.781a1.49 1.49 0 0 0 .88-.88L10.5 6.013l1.781 4.824a1.49 1.49 0 0 0 .884.885l4.825 1.78zM13.5 3.75a.75.75 0 0 1 .75-.75h1.5V1.5a.75.75 0 1 1 1.5 0V3h1.5a.75.75 0 1 1 0 1.5h-1.5V6a.75.75 0 1 1-1.5 0V4.5h-1.5a.75.75 0 0 1-.75-.75m9.75 4.5a.75.75 0 0 1-.75.75h-.75v.75a.75.75 0 1 1-1.5 0V9h-.75a.75.75 0 1 1 0-1.5h.75v-.75a.75.75 0 1 1 1.5 0v.75h.75a.75.75 0 0 1 .75.75",
    ],
    alignment: [
        "M3.75 3a.75.75 0 0 1 .75.75v16.5a.75.75 0 0 1-1.5 0V3.75A.75.75 0 0 1 3.75 3",
        "M7.365 5.25h9a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-.75.75h-9a.75.75 0 0 1-.75-.75V6a.75.75 0 0 1 .75-.75m.75 1.5V9h7.5V6.75zM20.25 13.5H7.5a.75.75 0 0 0-.75.75V18c0 .414.336.75.75.75h12.75A.75.75 0 0 0 21 18v-3.75a.75.75 0 0 0-.75-.75m-12 3.75V15H19.5v2.25z",
    ],
    archive: [
        "M3.375 3C2.339 3 1.5 3.84 1.5 4.875v.75c0 1.036.84 1.875 1.875 1.875h17.25c1.035 0 1.875-.84 1.875-1.875v-.75C22.5 3.839 21.66 3 20.625 3H3.375zM3.75 9.75a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h16.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3H3.75zm6.75 2.25a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1-.75-.75z",
    ],
    "arrow-down": [
        "M11.47 13.97a.75.75 0 0 0 1.06 0l3.75-3.75a.75.75 0 1 0-1.06-1.06L12 12.44 8.78 9.22a.75.75 0 0 0-1.06 1.06z",
    ],
    "arrow-left": [
        "M10.03 11.47a.75.75 0 0 0 0 1.06l3.75 3.75a.75.75 0 1 0 1.06-1.06L11.56 12l3.28-3.22a.75.75 0 0 0-1.06-1.06z",
    ],
};

const IconNames = Object.keys(iconSvgPaths);

function renderSvgPaths(icon) {
    const pathStrings = iconSvgPaths[icon];
    if (!pathStrings) {
        return null;
    }
    return pathStrings.map((d, i) => /*#__PURE__*/ _jsx("path", { d: d, fillRule: "evenodd", clipRule: "evenodd" }, i));
}
/**
 * Universal Icon Component for Framer
 *
 * This component displays SVG icons with customizable size and color.
 * Icons can be selected from a predefined set and styled to match your design.
 *
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */ export default function FramerIconComponent(props) {
    const { color = "#0099ff", icon = IconNames[0], size = 24 } = props; // Validate icon parameter
    if (!icon || typeof icon !== "string") {
        return /*#__PURE__*/ _jsx("div", {
            style: {
                ...containerStyle,
                width: size,
                height: size,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#999",
                fontSize: Math.max(10, size * 0.4),
                fontFamily: "Inter, sans-serif",
            },
            children: "?",
        });
    }
    const paths = renderSvgPaths(icon);
    const style = { ...containerStyle, color, width: size, height: size };
    return /*#__PURE__*/ _jsx("div", {
        style: style,
        children: /*#__PURE__*/ _jsx("svg", {
            fill: "currentColor",
            "data-icon": icon,
            width: size,
            height: size,
            viewBox: "0 0 24 24",
            role: "img",
            style: svgStyle,
            "aria-label": `${icon} icon`,
            children: paths,
        }),
    });
} // Property controls for the Framer interface
addPropertyControls(FramerIconComponent, {
    icon: {
        title: "Icon",
        type: ControlType.Enum,
        optionTitles: IconNames,
        options: IconNames,
        defaultValue: IconNames[0],
    },
    size: {
        title: "Size",
        type: ControlType.Number,
        min: 8,
        max: 128,
        step: 2,
        defaultValue: 24,
        displayStepper: true,
    },
    color: { title: "Color", type: ControlType.Color, defaultValue: "#0099ff" },
}); // Styles for the component
const containerStyle = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    verticalAlign: "top",
    lineHeight: 1,
    overflow: "hidden",
    userSelect: "none",
    pointerEvents: "auto",
};
const svgStyle = { fill: "currentColor", display: "block", flexShrink: 0 };
export const __FramerMetadata__ = {
    exports: {
        default: {
            type: "reactComponent",
            name: "FramerIconComponent",
            slots: [],
            annotations: {
                framerContractVersion: "1",
                framerSupportedLayoutWidth: "auto",
                framerSupportedLayoutHeight: "auto",
            },
        },
        IconNames: { type: "variable", annotations: { framerContractVersion: "1" } },
        iconSvgPaths: { type: "variable", annotations: { framerContractVersion: "1" } },
        __FramerMetadata__: { type: "variable" },
    },
};
//# sourceMappingURL=./DucalisIcons.map