2 | 
3 |
4 |
5 | # All Icons
6 |
7 | All Icons is a Penpot plugin that allows you to easily access icons from various icon libraries and add them to your project.
8 |
9 | ## Installation
10 |
11 | ### Penpot App
12 |
13 | 1. Sign in to Penpot (the official SaaS version).
14 | 1. Trigger the installation of the plugin by following the link below:
15 | [Install All Icons plugin](https://design.penpot.app/#?plugin=https://allicons.authormore.com/manifest.json)
16 | 1. Follow the instructions on the screen.
17 | The installer will inform you about the permissions requested by the plugin:
18 | - Content's write access is necessary for the icon insertion.
19 | - Content's read access is necessary to save and retrieve the plugin's settings e.g. open icon sets, selected style variants.
20 | 1. Go to a Penpot project.
21 | 1. Open the plugin through the plugin manager.
22 |
23 | > **Note**: If you manage a self-hosted Penpot instance, you can create an All Icons installation link by using the following pattern `
3 |
177 |
179 | Website
180 |
181 | License: {license.name}
182 | *
183 |
184 |
185 |
186 | {name}
178 |
251 |
252 |
258 |
259 |
281 | {iconGrids}
282 |
288 | );
289 | }
290 |
291 | export default App;
292 |
--------------------------------------------------------------------------------
/src/ControlsBar.css:
--------------------------------------------------------------------------------
1 | .controls-bar {
2 | display: flex;
3 | align-items: center;
4 | gap: 0.5rem;
5 |
6 | min-height: 30px;
7 | padding: var(--spacing-4) 0;
8 | }
9 |
10 | .controls-bar.grow-first > :first-child {
11 | flex-grow: 1;
12 | }
13 |
14 | .controls-bar.sticky.top {
15 | position: sticky;
16 | top: 0;
17 | }
18 |
19 | .controls-bar.sticky.bottom {
20 | position: fixed;
21 | bottom: 0;
22 |
23 | width: 100%;
24 | }
25 |
26 | [data-theme="dark"] .controls-bar {
27 | background-color: var(--db-primary);
28 | }
29 |
30 | [data-theme="light"] .controls-bar {
31 | background-color: var(--lb-primary);
32 | }
33 |
--------------------------------------------------------------------------------
/src/ControlsBar.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import "./ControlsBar.css";
3 |
4 | type ControlsBar = {
5 | children: ReactNode;
6 | stickTo?: "top" | "bottom";
7 | growFirstItem?: boolean;
8 | };
9 |
10 | export default function ControlsBar({
11 | children,
12 | stickTo,
13 | growFirstItem,
14 | }: ControlsBar) {
15 | const className = [
16 | "controls-bar",
17 | (stickTo && `sticky ${stickTo}`) || "",
18 | (growFirstItem && "grow-first") || "",
19 | ]
20 | .filter(Boolean)
21 | .join(" ");
22 |
23 | return {metaBreadcrumbs || ""}
260 | 280 |283 | *Information about license is provided for informational 284 | purposes only, in the best effort manner. Always check the official 285 | source before using the icons. 286 |
287 |{children}
;
24 | }
25 |
--------------------------------------------------------------------------------
/src/GridList.css:
--------------------------------------------------------------------------------
1 | .grid-list {
2 | display: grid;
3 | grid-template-columns: repeat(auto-fill, var(--item-size, 1fr));
4 |
5 | gap: 0.75rem;
6 | }
7 |
8 | .grid-list-empty {
9 | text-align: center;
10 | word-break: break-word;
11 |
12 | padding: 1rem;
13 | }
14 |
--------------------------------------------------------------------------------
/src/GridList.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties, ReactElement } from "react";
2 | import "./GridList.css";
3 |
4 | type GridListProps = {
5 | items: ReactElement[];
6 | emptyMessage?: string;
7 | itemSizePx?: number;
8 | };
9 |
10 | export default function GridList({
11 | items,
12 | emptyMessage,
13 | itemSizePx,
14 | }: GridListProps) {
15 | const hasItems = !!items.length;
16 | if (hasItems) {
17 | return (
18 |
22 | {items}
23 |
24 | );
25 | }
26 |
27 | return {emptyMessage}
; 28 | } 29 | -------------------------------------------------------------------------------- /src/Icon.css: -------------------------------------------------------------------------------- 1 | svg { 2 | height: auto; 3 | } 4 | -------------------------------------------------------------------------------- /src/Icon.tsx: -------------------------------------------------------------------------------- 1 | import "./Icon.css"; 2 | 3 | type IconProps = { 4 | attributes: Record
16 |
19 | onChange(value)}
25 | />
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/Select.css:
--------------------------------------------------------------------------------
1 | /* @penpot/plugin-styles has a broken background SVG for the select, compared to the style live at https://penpot.github.io/penpot-plugins/ */
2 | .select.dropdown-icon-fix {
3 | background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%3e%3cpath%20d='m4%206%204%204%204-4'%20style='%20fill:%20none;%20stroke-width:%201;%20stroke:%20rgb(143,%20157,%20163);%20stroke-opacity:%201;%20'%20/%3e%3c/svg%3e");
4 | }
5 |
6 | .select.spacing-fix {
7 | background-position: right var(--spacing-8) center;
8 | padding-inline: var(--spacing-8)
9 | calc(var(--spacing-8) + 24px + var(--spacing-8));
10 | }
11 |
--------------------------------------------------------------------------------
/src/Select.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEventHandler } from "react";
2 | import "./Select.css";
3 |
4 | type SelectProps = {
5 | label: string;
6 | options: Options[];
7 | value: string;
8 | onChange: ChangeEventHandler
24 |
27 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/dataStructure.ts:
--------------------------------------------------------------------------------
1 | import { kebabCaseToCamelCase } from "./string";
2 |
3 | export function parseAttributes(
4 | attributes: string = "",
5 | ): Record