Skip to content

Commit

Permalink
feat: generate icon css classes on build
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamiehenson
jamiehenson committed Nov 14, 2024
1 parent 44b39b8 commit a216632
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 1 deletion.
18 changes: 17 additions & 1 deletion scripts/generate-sprites.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ const svgDir = path.resolve(__dirname, "../src/core/icons");
// Object to store the grouped filenames
const iconGroups: Record<string, string[]> = {};

let iconCSSClasses = "";

// Read all SVG files from the directory and add them to the sprite
fs.readdirSync(svgDir).forEach((file) => {
if (file.endsWith(".svg")) {
Expand All @@ -55,6 +57,7 @@ fs.readdirSync(svgDir).forEach((file) => {

// Remove the .svg extension before adding to the group
const fileNameWithoutExtension = file.replace(".svg", "");
iconCSSClasses += `.ui-${fileNameWithoutExtension} { background-image: url(../icons/${file}); }\n`;
iconGroups[key].push(fileNameWithoutExtension);
}

Expand Down Expand Up @@ -88,6 +91,11 @@ sprite.compile((err, result) => {
"../src/core/Icon/computed-icons.ts",
);

const iconClassesPath = path.resolve(
__dirname,
"../src/core/styles/icons.css",
);

const generatedIconGroups =
`// AUTOGENERATED BY build:sprites - DO NOT EDIT\n\nexport const computedIcons = ${JSON.stringify(iconGroups, null, 2)}`.replace(
/]/g,
Expand All @@ -96,7 +104,15 @@ sprite.compile((err, result) => {

fs.writeFileSync(iconJsonPath, generatedIconGroups, "utf-8");

console.log("🖼️ SVG sprites and icon manifest generated successfully!");
fs.writeFileSync(
iconClassesPath,
`// AUTOGENERATED BY build:sprites - DO NOT EDIT\n\n${iconCSSClasses}`,
"utf-8",
);

console.log(
"🖼️ SVG sprites, icon manifest and icon CSS classes generated successfully!",
);
} catch (error) {
console.log("SVG sprite/manifest generation failed:", error);
}
Expand Down
5 changes: 5 additions & 0 deletions src/core/styles.components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import "./styles/layout.css";
@import "./styles/shadows.css";
@import "./styles/text.css";
@import "./styles/icons.css"; /* Autogenerated at build time */

@layer components {
/* Basis for icon component */
Expand Down Expand Up @@ -43,4 +44,8 @@
.ui-container-padding {
@apply px-24 py-40 sm:px-40 sm:py-48 md:p-64;
}

.ui-icon {
@apply bg-cover;
}
}
26 changes: 26 additions & 0 deletions src/core/styles/Forms.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,32 @@ export const Inputs = {
/>
<p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
</div>
<div>
<p className="mb-16 text-neutral-800">With icon insert</p>
<div className="relative">
<div className="h-32 w-32 ui-icon ui-icon-display-48hrs absolute left-8 top-8"></div>
<input
type="search"
className="ui-input pl-48"
placeholder="With icon"
autoComplete="off"
/>
</div>
</div>
<div>
<p className="mb-16 text-neutral-800">With character insert</p>
<div className="relative">
<div className="h-32 w-32 absolute left-8 top-8 flex items-center justify-center">
$
</div>
<input
type="search"
className="ui-input pl-40"
placeholder="With icon"
autoComplete="off"
/>
</div>
</div>
</div>
),
};
Expand Down
171 changes: 171 additions & 0 deletions src/core/styles/icons.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
// AUTOGENERATED BY build:sprites - DO NOT EDIT

.ui-icon-display-48hrs { background-image: url(../icons/icon-display-48hrs.svg); }
.ui-icon-display-ably-channels { background-image: url(../icons/icon-display-ably-channels.svg); }
.ui-icon-display-about-ably-col { background-image: url(../icons/icon-display-about-ably-col.svg); }
.ui-icon-display-api-keys { background-image: url(../icons/icon-display-api-keys.svg); }
.ui-icon-display-api { background-image: url(../icons/icon-display-api.svg); }
.ui-icon-display-architectural-guidance { background-image: url(../icons/icon-display-architectural-guidance.svg); }
.ui-icon-display-asset-tracking-col { background-image: url(../icons/icon-display-asset-tracking-col.svg); }
.ui-icon-display-authentication { background-image: url(../icons/icon-display-authentication.svg); }
.ui-icon-display-avatar-stack { background-image: url(../icons/icon-display-avatar-stack.svg); }
.ui-icon-display-browser { background-image: url(../icons/icon-display-browser.svg); }
.ui-icon-display-calendar { background-image: url(../icons/icon-display-calendar.svg); }
.ui-icon-display-call-mobile { background-image: url(../icons/icon-display-call-mobile.svg); }
.ui-icon-display-careers-col { background-image: url(../icons/icon-display-careers-col.svg); }
.ui-icon-display-case-studies-col { background-image: url(../icons/icon-display-case-studies-col.svg); }
.ui-icon-display-chat-col { background-image: url(../icons/icon-display-chat-col.svg); }
.ui-icon-display-chat-mono { background-image: url(../icons/icon-display-chat-mono.svg); }
.ui-icon-display-chat-stack-col { background-image: url(../icons/icon-display-chat-stack-col.svg); }
.ui-icon-display-chat-stack { background-image: url(../icons/icon-display-chat-stack.svg); }
.ui-icon-display-cloud-servers { background-image: url(../icons/icon-display-cloud-servers.svg); }
.ui-icon-display-compare-tech-col { background-image: url(../icons/icon-display-compare-tech-col.svg); }
.ui-icon-display-connection-state-recovery { background-image: url(../icons/icon-display-connection-state-recovery.svg); }
.ui-icon-display-consumer-groups { background-image: url(../icons/icon-display-consumer-groups.svg); }
.ui-icon-display-custom-cname { background-image: url(../icons/icon-display-custom-cname.svg); }
.ui-icon-display-custom { background-image: url(../icons/icon-display-custom.svg); }
.ui-icon-display-customers-col { background-image: url(../icons/icon-display-customers-col.svg); }
.ui-icon-display-data-broadcast-col { background-image: url(../icons/icon-display-data-broadcast-col.svg); }
.ui-icon-display-data-broadcast-mono { background-image: url(../icons/icon-display-data-broadcast-mono.svg); }
.ui-icon-display-data-synchronization-col { background-image: url(../icons/icon-display-data-synchronization-col.svg); }
.ui-icon-display-dedicated-cluster { background-image: url(../icons/icon-display-dedicated-cluster.svg); }
.ui-icon-display-deltas { background-image: url(../icons/icon-display-deltas.svg); }
.ui-icon-display-docs-col { background-image: url(../icons/icon-display-docs-col.svg); }
.ui-icon-display-documentation { background-image: url(../icons/icon-display-documentation.svg); }
.ui-icon-display-dynamic-channel-groups { background-image: url(../icons/icon-display-dynamic-channel-groups.svg); }
.ui-icon-display-edge-network { background-image: url(../icons/icon-display-edge-network.svg); }
.ui-icon-display-elasticity { background-image: url(../icons/icon-display-elasticity.svg); }
.ui-icon-display-equalisers-mono { background-image: url(../icons/icon-display-equalisers-mono.svg); }
.ui-icon-display-events-col { background-image: url(../icons/icon-display-events-col.svg); }
.ui-icon-display-exactly-once-delivery { background-image: url(../icons/icon-display-exactly-once-delivery.svg); }
.ui-icon-display-examples-col { background-image: url(../icons/icon-display-examples-col.svg); }
.ui-icon-display-fan-out { background-image: url(../icons/icon-display-fan-out.svg); }
.ui-icon-display-firehose { background-image: url(../icons/icon-display-firehose.svg); }
.ui-icon-display-gdpr { background-image: url(../icons/icon-display-gdpr.svg); }
.ui-icon-display-general-comms { background-image: url(../icons/icon-display-general-comms.svg); }
.ui-icon-display-granular-permissions { background-image: url(../icons/icon-display-granular-permissions.svg); }
.ui-icon-display-hipaa-mono { background-image: url(../icons/icon-display-hipaa-mono.svg); }
.ui-icon-display-hipaa { background-image: url(../icons/icon-display-hipaa.svg); }
.ui-icon-display-history { background-image: url(../icons/icon-display-history.svg); }
.ui-icon-display-integrations-col { background-image: url(../icons/icon-display-integrations-col.svg); }
.ui-icon-display-integrations { background-image: url(../icons/icon-display-integrations.svg); }
.ui-icon-display-it-support-access { background-image: url(../icons/icon-display-it-support-access.svg); }
.ui-icon-display-it-support-helpdesk { background-image: url(../icons/icon-display-it-support-helpdesk.svg); }
.ui-icon-display-kafka-at-the-edge-col { background-image: url(../icons/icon-display-kafka-at-the-edge-col.svg); }
.ui-icon-display-laptop { background-image: url(../icons/icon-display-laptop.svg); }
.ui-icon-display-lightbulb-col { background-image: url(../icons/icon-display-lightbulb-col.svg); }
.ui-icon-display-live-chat { background-image: url(../icons/icon-display-live-chat.svg); }
.ui-icon-display-live-updates-results-metrics-col { background-image: url(../icons/icon-display-live-updates-results-metrics-col.svg); }
.ui-icon-display-map-pin { background-image: url(../icons/icon-display-map-pin.svg); }
.ui-icon-display-message-batching { background-image: url(../icons/icon-display-message-batching.svg); }
.ui-icon-display-message-persistence { background-image: url(../icons/icon-display-message-persistence.svg); }
.ui-icon-display-message-queues { background-image: url(../icons/icon-display-message-queues.svg); }
.ui-icon-display-message { background-image: url(../icons/icon-display-message.svg); }
.ui-icon-display-multi-user-spaces-col { background-image: url(../icons/icon-display-multi-user-spaces-col.svg); }
.ui-icon-display-observe-analytics { background-image: url(../icons/icon-display-observe-analytics.svg); }
.ui-icon-display-padlock-closed { background-image: url(../icons/icon-display-padlock-closed.svg); }
.ui-icon-display-platform { background-image: url(../icons/icon-display-platform.svg); }
.ui-icon-display-play { background-image: url(../icons/icon-display-play.svg); }
.ui-icon-display-premium-support { background-image: url(../icons/icon-display-premium-support.svg); }
.ui-icon-display-privacy-shield-framework { background-image: url(../icons/icon-display-privacy-shield-framework.svg); }
.ui-icon-display-private-link { background-image: url(../icons/icon-display-private-link.svg); }
.ui-icon-display-push-notifications-col { background-image: url(../icons/icon-display-push-notifications-col.svg); }
.ui-icon-display-push-notifications-mono { background-image: url(../icons/icon-display-push-notifications-mono.svg); }
.ui-icon-display-push-notifications { background-image: url(../icons/icon-display-push-notifications.svg); }
.ui-icon-display-quickstart-guides-col { background-image: url(../icons/icon-display-quickstart-guides-col.svg); }
.ui-icon-display-resources-col { background-image: url(../icons/icon-display-resources-col.svg); }
.ui-icon-display-rewind { background-image: url(../icons/icon-display-rewind.svg); }
.ui-icon-display-sdks-col { background-image: url(../icons/icon-display-sdks-col.svg); }
.ui-icon-display-send-received-messages { background-image: url(../icons/icon-display-send-received-messages.svg); }
.ui-icon-display-servers { background-image: url(../icons/icon-display-servers.svg); }
.ui-icon-display-shopping-cart { background-image: url(../icons/icon-display-shopping-cart.svg); }
.ui-icon-display-sla { background-image: url(../icons/icon-display-sla.svg); }
.ui-icon-display-soc2-type2-mono { background-image: url(../icons/icon-display-soc2-type2-mono.svg); }
.ui-icon-display-soc2-type2 { background-image: url(../icons/icon-display-soc2-type2.svg); }
.ui-icon-display-subscription-filters { background-image: url(../icons/icon-display-subscription-filters.svg); }
.ui-icon-display-support-chat-mono { background-image: url(../icons/icon-display-support-chat-mono.svg); }
.ui-icon-display-system-metadata { background-image: url(../icons/icon-display-system-metadata.svg); }
.ui-icon-display-tech-account-comms { background-image: url(../icons/icon-display-tech-account-comms.svg); }
.ui-icon-display-tutorials-demos-col { background-image: url(../icons/icon-display-tutorials-demos-col.svg); }
.ui-icon-display-virtual-events-col { background-image: url(../icons/icon-display-virtual-events-col.svg); }
.ui-icon-display-virtual-events { background-image: url(../icons/icon-display-virtual-events.svg); }
.ui-icon-gui-ably-badge { background-image: url(../icons/icon-gui-ably-badge.svg); }
.ui-icon-gui-arrow-bidirectional-horizontal { background-image: url(../icons/icon-gui-arrow-bidirectional-horizontal.svg); }
.ui-icon-gui-arrow-bidirectional-vertical { background-image: url(../icons/icon-gui-arrow-bidirectional-vertical.svg); }
.ui-icon-gui-arrow-down { background-image: url(../icons/icon-gui-arrow-down.svg); }
.ui-icon-gui-arrow-left { background-image: url(../icons/icon-gui-arrow-left.svg); }
.ui-icon-gui-arrow-right { background-image: url(../icons/icon-gui-arrow-right.svg); }
.ui-icon-gui-arrow-up { background-image: url(../icons/icon-gui-arrow-up.svg); }
.ui-icon-gui-burger-menu { background-image: url(../icons/icon-gui-burger-menu.svg); }
.ui-icon-gui-check-circled-fill-black { background-image: url(../icons/icon-gui-check-circled-fill-black.svg); }
.ui-icon-gui-check-circled-fill { background-image: url(../icons/icon-gui-check-circled-fill.svg); }
.ui-icon-gui-check-circled { background-image: url(../icons/icon-gui-check-circled.svg); }
.ui-icon-gui-checklist-checked { background-image: url(../icons/icon-gui-checklist-checked.svg); }
.ui-icon-gui-clock { background-image: url(../icons/icon-gui-clock.svg); }
.ui-icon-gui-close { background-image: url(../icons/icon-gui-close.svg); }
.ui-icon-gui-copy { background-image: url(../icons/icon-gui-copy.svg); }
.ui-icon-gui-cross-circled-fill { background-image: url(../icons/icon-gui-cross-circled-fill.svg); }
.ui-icon-gui-cross-circled { background-image: url(../icons/icon-gui-cross-circled.svg); }
.ui-icon-gui-dash-circled { background-image: url(../icons/icon-gui-dash-circled.svg); }
.ui-icon-gui-disclosure-arrow { background-image: url(../icons/icon-gui-disclosure-arrow.svg); }
.ui-icon-gui-document-generic { background-image: url(../icons/icon-gui-document-generic.svg); }
.ui-icon-gui-enlarge { background-image: url(../icons/icon-gui-enlarge.svg); }
.ui-icon-gui-external-link { background-image: url(../icons/icon-gui-external-link.svg); }
.ui-icon-gui-filter-flow-step-1 { background-image: url(../icons/icon-gui-filter-flow-step-1.svg); }
.ui-icon-gui-filter-flow-step-2 { background-image: url(../icons/icon-gui-filter-flow-step-2.svg); }
.ui-icon-gui-filter-flow-step-3 { background-image: url(../icons/icon-gui-filter-flow-step-3.svg); }
.ui-icon-gui-history { background-image: url(../icons/icon-gui-history.svg); }
.ui-icon-gui-info { background-image: url(../icons/icon-gui-info.svg); }
.ui-icon-gui-link-arrow { background-image: url(../icons/icon-gui-link-arrow.svg); }
.ui-icon-gui-link { background-image: url(../icons/icon-gui-link.svg); }
.ui-icon-gui-live-chat { background-image: url(../icons/icon-gui-live-chat.svg); }
.ui-icon-gui-minus { background-image: url(../icons/icon-gui-minus.svg); }
.ui-icon-gui-partial { background-image: url(../icons/icon-gui-partial.svg); }
.ui-icon-gui-plus { background-image: url(../icons/icon-gui-plus.svg); }
.ui-icon-gui-quote-marks-solid { background-image: url(../icons/icon-gui-quote-marks-solid.svg); }
.ui-icon-gui-refresh { background-image: url(../icons/icon-gui-refresh.svg); }
.ui-icon-gui-resources { background-image: url(../icons/icon-gui-resources.svg); }
.ui-icon-gui-search { background-image: url(../icons/icon-gui-search.svg); }
.ui-icon-gui-tick { background-image: url(../icons/icon-gui-tick.svg); }
.ui-icon-gui-warning { background-image: url(../icons/icon-gui-warning.svg); }
.ui-icon-other-quote { background-image: url(../icons/icon-other-quote.svg); }
.ui-icon-product-asset-tracking { background-image: url(../icons/icon-product-asset-tracking.svg); }
.ui-icon-product-chat { background-image: url(../icons/icon-product-chat.svg); }
.ui-icon-product-liveobjects { background-image: url(../icons/icon-product-liveobjects.svg); }
.ui-icon-product-livesync { background-image: url(../icons/icon-product-livesync.svg); }
.ui-icon-product-pubsub { background-image: url(../icons/icon-product-pubsub.svg); }
.ui-icon-product-spaces { background-image: url(../icons/icon-product-spaces.svg); }
.ui-icon-social-discord { background-image: url(../icons/icon-social-discord.svg); }
.ui-icon-social-facebook { background-image: url(../icons/icon-social-facebook.svg); }
.ui-icon-social-github { background-image: url(../icons/icon-social-github.svg); }
.ui-icon-social-glassdoor { background-image: url(../icons/icon-social-glassdoor.svg); }
.ui-icon-social-google { background-image: url(../icons/icon-social-google.svg); }
.ui-icon-social-linkedin { background-image: url(../icons/icon-social-linkedin.svg); }
.ui-icon-social-stackoverflow { background-image: url(../icons/icon-social-stackoverflow.svg); }
.ui-icon-social-twitter { background-image: url(../icons/icon-social-twitter.svg); }
.ui-icon-social-x { background-image: url(../icons/icon-social-x.svg); }
.ui-icon-social-youtube { background-image: url(../icons/icon-social-youtube.svg); }
.ui-icon-tech-amqp10 { background-image: url(../icons/icon-tech-amqp10.svg); }
.ui-icon-tech-apache-kafka { background-image: url(../icons/icon-tech-apache-kafka.svg); }
.ui-icon-tech-apachepulsar { background-image: url(../icons/icon-tech-apachepulsar.svg); }
.ui-icon-tech-awskinesis { background-image: url(../icons/icon-tech-awskinesis.svg); }
.ui-icon-tech-awslambda { background-image: url(../icons/icon-tech-awslambda.svg); }
.ui-icon-tech-awssqs { background-image: url(../icons/icon-tech-awssqs.svg); }
.ui-icon-tech-azureservicebus { background-image: url(../icons/icon-tech-azureservicebus.svg); }
.ui-icon-tech-cloudflareworkers { background-image: url(../icons/icon-tech-cloudflareworkers.svg); }
.ui-icon-tech-csharp { background-image: url(../icons/icon-tech-csharp.svg); }
.ui-icon-tech-flutter { background-image: url(../icons/icon-tech-flutter.svg); }
.ui-icon-tech-gcloudfunctions { background-image: url(../icons/icon-tech-gcloudfunctions.svg); }
.ui-icon-tech-go { background-image: url(../icons/icon-tech-go.svg); }
.ui-icon-tech-ifttt { background-image: url(../icons/icon-tech-ifttt.svg); }
.ui-icon-tech-java { background-image: url(../icons/icon-tech-java.svg); }
.ui-icon-tech-javascript { background-image: url(../icons/icon-tech-javascript.svg); }
.ui-icon-tech-net { background-image: url(../icons/icon-tech-net.svg); }
.ui-icon-tech-objectivec { background-image: url(../icons/icon-tech-objectivec.svg); }
.ui-icon-tech-php { background-image: url(../icons/icon-tech-php.svg); }
.ui-icon-tech-python { background-image: url(../icons/icon-tech-python.svg); }
.ui-icon-tech-react { background-image: url(../icons/icon-tech-react.svg); }
.ui-icon-tech-ruby { background-image: url(../icons/icon-tech-ruby.svg); }
.ui-icon-tech-swift { background-image: url(../icons/icon-tech-swift.svg); }
.ui-icon-tech-terraform { background-image: url(../icons/icon-tech-terraform.svg); }
.ui-icon-tech-zapier { background-image: url(../icons/icon-tech-zapier.svg); }

0 comments on commit a216632

Please sign in to comment.