import type { JSX } from 'solid-js';
type IconProps = {
size?: number;
class?: string;
style?: JSX.CSSProperties;
};
const base = (size: number): JSX.SvgSVGAttributes<SVGSVGElement> => ({
width: size,
height: size,
viewBox: '0 0 16 16',
fill: 'none',
stroke: 'currentColor',
'stroke-width': 1.5,
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
});
export const Library = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<rect x="2" y="3" width="3" height="10" rx="0.5" />
<rect x="6.5" y="3" width="3" height="10" rx="0.5" />
<path d="M11 5l2 8" />
</svg>
);
};
export const Sliders = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<line x1="2" y1="5" x2="10" y2="5" />
<line x1="13" y1="5" x2="14" y2="5" />
<circle cx="11.5" cy="5" r="1.5" />
<line x1="2" y1="11" x2="5" y2="11" />
<line x1="8" y1="11" x2="14" y2="11" />
<circle cx="6.5" cy="11" r="1.5" />
</svg>
);
};
export const Mic = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<rect x="6" y="2" width="4" height="8" rx="2" />
<path d="M3.5 8a4.5 4.5 0 0 0 9 0" />
<line x1="8" y1="12.5" x2="8" y2="14" />
</svg>
);
};
export const Record = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<circle cx="8" cy="8" r="5" />
<circle cx="8" cy="8" r="2" fill="currentColor" />
</svg>
);
};
export const Square = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<rect x="3" y="3" width="10" height="10" rx="1" fill="currentColor" />
</svg>
);
};
export const Share = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<circle cx="4" cy="8" r="2" />
<circle cx="12" cy="4" r="2" />
<circle cx="12" cy="12" r="2" />
<line x1="5.7" y1="7" x2="10.3" y2="5" />
<line x1="5.7" y1="9" x2="10.3" y2="11" />
</svg>
);
};
export const Menu = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<line x1="3" y1="5" x2="13" y2="5" />
<line x1="3" y1="8" x2="13" y2="8" />
<line x1="3" y1="11" x2="13" y2="11" />
</svg>
);
};
export const ChevDown = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<path d="M4 6l4 4 4-4" />
</svg>
);
};
export const ChevUp = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<path d="M4 10l4-4 4 4" />
</svg>
);
};
export const Search = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<circle cx="7" cy="7" r="4" />
<line x1="10" y1="10" x2="13" y2="13" />
</svg>
);
};
export const X = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<line x1="4" y1="4" x2="12" y2="12" />
<line x1="12" y1="4" x2="4" y2="12" />
</svg>
);
};
export const Plus = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<line x1="8" y1="3" x2="8" y2="13" />
<line x1="3" y1="8" x2="13" y2="8" />
</svg>
);
};
export const Reset = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<path d="M3 8a5 5 0 1 0 1.5-3.5" />
<path d="M3 3v3h3" />
</svg>
);
};
export const Play = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<path d="M5 3.5L12 8l-7 4.5z" fill="currentColor" />
</svg>
);
};
export const Pause = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<rect x="4.5" y="3" width="2.5" height="10" rx="0.5" fill="currentColor" />
<rect x="9" y="3" width="2.5" height="10" rx="0.5" fill="currentColor" />
</svg>
);
};
export const Sparkle = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<path d="M8 2v3M8 11v3M2 8h3M11 8h3M4.3 4.3l2.1 2.1M9.6 9.6l2.1 2.1M4.3 11.7l2.1-2.1M9.6 6.4l2.1-2.1" />
</svg>
);
};
export const Trash = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<path d="M3 4.5h10M6 4.5V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.5M4.5 4.5v8a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-8" />
<line x1="7" y1="7" x2="7" y2="11" />
<line x1="9" y1="7" x2="9" y2="11" />
</svg>
);
};
export const Camera = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<path d="M2.5 5.5h2l1-1.5h3l1 1.5h2a1 1 0 0 1 1 1v5.5a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1V6.5a1 1 0 0 1 1-1z" />
<circle cx="8" cy="8.75" r="2.1" />
</svg>
);
};
export const Help = (p: IconProps) => {
const s = p.size ?? 16;
return (
<svg {...base(s)} class={p.class} style={p.style} aria-hidden="true">
<circle cx="8" cy="8" r="6" />
<path d="M6.3 6.5a1.7 1.7 0 0 1 3.4 0c0 1-1.7 1.3-1.7 2.4" />
<line x1="8" y1="11" x2="8" y2="11.5" />
</svg>
);
};