https://www.linkedclean.app/lc-category-icons.jsx

1// LinkedClean — Category icons (Linear-style filled solid glyphs)
2// 8 categories, each as a filled solid shape with internal cutouts,
3// sitting in a rounded container. Uses LC ink token for fill.
4
5const CategoryContainer = ({ size = 22, children }) => {
6  return (
7    <svg
8      width={size}
9      height={size}
10      viewBox="0 0 24 24"
11      fill="none"
12      stroke="currentColor"
13      strokeWidth="1.5"
14      strokeLinecap="round"
15      strokeLinejoin="round"
16      style={{ flexShrink: 0 }}
17    >
18      {children}
19    </svg>
20  );
21};
22
23// 1. Patrocinado — Tag (etiqueta com furo) — canon da extensão (icons.js)
24function IconPatrocinado(props) {
25  return (
26    <CategoryContainer {...props}>
27      <path d="M20.5 12.5 12.5 20.5a1.5 1.5 0 0 1-2.1 0l-7-7a1 1 0 0 1-.3-.7V4.5A1.5 1.5 0 0 1 4.5 3h8.3a1 1 0 0 1 .7.3l7 7a1.5 1.5 0 0 1 0 2.2Z" />
28      <circle cx="7.5" cy="7.5" r="1.1" />
29    </CategoryContainer>
30  );
31}
32
33// 2. Empresa — Prédio com janelas (canon da extensão)
34function IconEmpresa(props) {
35  return (
36    <CategoryContainer {...props}>
37      <path d="M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16" />
38      <path d="M15 21V11a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v10" />
39      <path d="M3 21h18" />
40      <path d="M8 8h3M8 12h3M8 16h3" />
41    </CategoryContainer>
42  );
43}
44
45// 3. Vídeo — Retângulo com play (canon da extensão)
46function IconVideo(props) {
47  return (
48    <CategoryContainer {...props}>
49      <rect x="3" y="5" width="18" height="14" rx="2.5" />
50      <path d="m10.5 9 4.5 3-4.5 3V9Z" />
51    </CategoryContainer>
52  );
53}
54
55// 4. Engagement Bait — Anzol (canon da extensão)
56function IconBait(props) {
57  return (
58    <CategoryContainer {...props}>
59      <path d="M17 4v9.5a4.5 4.5 0 1 1-9 0V11" />
60      <circle cx="17" cy="3.2" r="0.9" />
61    </CategoryContainer>
62  );
63}
64
65// 5. Política — Megafone (canon da extensão)
66function IconPolitica(props) {
67  return (
68    <CategoryContainer {...props}>
69      <path d="M4 10v4a1 1 0 0 0 1 1h2.5l9 4.5a.5.5 0 0 0 .75-.45V4.95a.5.5 0 0 0-.75-.45L7.5 9H5a1 1 0 0 0-1 1Z" />
70      <path d="M8 15v3.5a1 1 0 0 0 1 1h1.5a1 1 0 0 0 1-1V17" />
71    </CategoryContainer>
72  );
73}
74
75// 6. AI — Sparkle + plus (Linear AI clients style)
76function IconAI(props) {
77  return (
78    <CategoryContainer {...props}>
79      <path d="M11 3c.4 0 .8.3.9.7l1 3.4 3.4 1c.4.1.7.5.7.9 0 .4-.3.8-.7.9l-3.4 1-1 3.4c-.1.4-.5.7-.9.7-.4 0-.8-.3-.9-.7l-1-3.4-3.4-1c-.4-.1-.7-.5-.7-.9 0-.4.3-.8.7-.9l3.4-1 1-3.4c.1-.4.5-.7.9-.7Z" />
80      <path d="M18 14a.7.7 0 0 1 .7.5l.4 1.4 1.4.4a.7.7 0 0 1 0 1.4l-1.4.4-.4 1.4a.7.7 0 0 1-1.4 0l-.4-1.4-1.4-.4a.7.7 0 0 1 0-1.4l1.4-.4.4-1.4A.7.7 0 0 1 18 14Z" />
81    </CategoryContainer>
82  );
83}
84
85// 7. Story-time — Speech bubble solid with dots
86function IconStoryTime(props) {
87  return (
88    <CategoryContainer {...props}>
89      <path
90        fillRule="evenodd"
91        clipRule="evenodd"
92        d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-3.4 3.7c-.6.7-1.6.2-1.6-.7V17H6a3 3 0 0 1-3-3V6Zm5 4.5a1.2 1.2 0 1 1 0-2.5 1.2 1.2 0 0 1 0 2.5Zm4 0a1.2 1.2 0 1 1 0-2.5 1.2 1.2 0 0 1 0 2.5Zm4 0a1.2 1.2 0 1 1 0-2.5 1.2 1.2 0 0 1 0 2.5Z"
93      />
94    </CategoryContainer>
95  );
96}
97
98// 8. Vagas — Briefcase solid
99function IconVagas(props) {
100  return (
101    <CategoryContainer {...props}>
102      <path
103        fillRule="evenodd"
104        clipRule="evenodd"
105        d="M9 3a2 2 0 0 0-2 2v1H4a2 2 0 0 0-2 2v3.5l10 2.5 10-2.5V8a2 2 0 0 0-2-2h-3V5a2 2 0 0 0-2-2H9Zm6 3V5H9v1h6Zm7 7-10 2.5L2 13v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6Z"
106      />
107    </CategoryContainer>
108  );
109}
110
111window.IconPatrocinado = IconPatrocinado;
112window.IconEmpresa = IconEmpresa;
113window.IconVideo = IconVideo;
114window.IconBait = IconBait;
115window.IconPolitica = IconPolitica;
116window.IconAI = IconAI;
117window.IconStoryTime = IconStoryTime;
118window.IconVagas = IconVagas;
119
120window.LCCategoryIconMap = {
121  patrocinado: IconPatrocinado,
122  empresa: IconEmpresa,
123  video: IconVideo,
124  bait: IconBait,
125  politica: IconPolitica,
126  ai: IconAI,
127  storytime: IconStoryTime,
128  vagas: IconVagas,
129};