Export & Integrate Icons from Design System

[ashleyshaw]

🛠️ Export & Integrate Icons from Design System

Branch Target: 2.1-trunk (via dedicated feature branch)
Assignee: @ZaredRogers
Reviewer: @tibiii
Labels: type: enhancement, icons, design-system, needs-export

---

✅ Objective

Export and prepare a full set of icons from the design system for integration into the Tour Operator plugin. These icons are based on the open source Heroicons set and will be used across our block-based UI templates.

---

📁 File Structure & Export Rules

1. Export icons into the following folders:

/includes/blocks/icons/src/source-icons/solid/
/includes/blocks/icons/src/source-icons/outline/

2. Each icon should:

• Be in SVG format
• Use the correct style:
  • Solid: <path fill="currentColor" />
  • Outline: <path stroke="currentColor" />
• Be named identically in both styles if both exist (e.g. arrow-down.svg)

3. Do not merge directly into 2.1-trunk
   Instead, create a feature branch (e.g. feature/icon-export-20250728) and notify @tibiii once pushed.

---

🗂️ Icon List (from Design System)

Icon Name	Solid	Outline
arrow-down-icon		✅
arrow-right-icon		✅
check-icon		✅
chevron-down-icon		✅
chevron-left-icon		✅
chevron-right-icon		✅
chevron-up-icon		✅
close-icon		✅
email-icon	✅	✅
heart-icon	✅	✅
destination-icon		✅
phone-icon	✅	✅
search-icon		✅
rating-icon	✅	✅
user-icon	✅	✅
warning-icon	✅	✅
accommodation-icon	✅
travel-style-icon	✅
price-icon	✅	✅
duration-icon		✅
departs-from-ends-in-icon		✅
number-of-units-icon	✅
accommodation-type-icon		✅
drinks-basis-icon		✅
best-months-to-travel-icon		✅
room-basis-icon	✅
suggested-visitor-types-icon		✅
special-interests-icon	✅
minimum-child-age-icon	✅
group-size-icon	✅
list-arrow-icon	✅	✅
list-check-icon	✅	✅

---

🔄 Post-Export Tasks

• Push exported icons into a feature branch
• Notify @tibiii to run the icon build process
• Wait for confirmation that icons are compiled and integrated correctly
• Once verified, merge the feature branch into 2.1-trunk

---

📚 Attribution & Readme Updates

Please update both plugin readmes to credit the open source icon set:

readme.md

Add under Assets or Design Credits section:

### Icon Set Attribution
Icons used in this plugin are derived from the [Heroicons](https://heroicons.com/) open source icon library by the creators of Tailwind CSS. Licensed under the MIT License.


readme.txt & readme.md file updates - Add under Assets or Credits section:

== Assets ==
Icons are sourced from the Heroicons library: https://heroicons.com/
Licensed under the MIT License.

[tibiii]

Right now all the icons from heroicons are included in the source-icons/ folder. We should remove what is not used and add any custom icon that we might need, that is not provided by heroicons

[ashleyshaw]

@tibiii I want @ZaredRogers to export specific icon sizes for the icons we intend using, with specific padding.

[tibiii]

Right now I specified only the height of the icons, to somehow relate it to the font sizes from the theme: https://github.com/lightspeedwp/tour-operator/blob/2.1-trunk/includes/blocks/icons/src/style.scss . For each of the inserted icon a margin/padding can be set based on the theme.json file. We can also include the paddings in the style.scss file, but I think that is not ideal.

@ZaredRogers is there a specific need you have in mind for the specific padding for any icons?

[ashleyshaw]

@tibiii do we need to write a get up issue to change style.scss to block.json? I would prefer that from the start we define all new blocks to use block.json values to define margin, padding and whatever other json values relevant to the specific block.

[ZaredRogers]

@tibiii , I have adjusted all the padding on the icons to be uniform, so no padding will need to be inserted. I am going to export all the icons that are used next to text at 20px, as they are in the design system. Is there a specific size you would suggest for the others (chevrons, email, phone, arrows, etc)?

[tibiii]

@ZaredRogers I think we can stick to just one size/viewbox for all of them and then adjust the icons' size via the typography option, so that it's in line with the theme's style.

[ZaredRogers]

@tibiii , ok cool, I will export them all at 20px then. I have updated the list above in the description to include all of the icons with the way they are named. There is a corresponding tab in the document with usage. Please check if you're happy with the naming.
Not all icons come with a solid counterpart, checks and chevrons for example. And a few don't have an outline version. I could make them if necessary, they would just have a solid background. Should I include these?