README.md

Kajabi Tinymce focuswriter_icons icon pack

This is a template project for creating an Icon Pack for TinyMCE. For instructions on how to use this project, visit the documentation for Create an Icon Pack.

How to use

1. Install dependencies using npm install
   • Enter the name of the icon pack (found in package.json): focuswriter_icons
2. Place icons in src/svg
3. Run gulp to build the icon pack (See "Known Issues" below)
4. Open the file dist/icons/focuswriter_icons/icons.js
5. Copy only your new icon to the Kajabi-products repo in the file
   • app/javascript/common/components/FocusWriter/assets/focuswriter_icons/register.js

Known Issues

1. The generator is known to override some required elements from the original <svg />, causing the output icon to appear broken. 🥲
   • highlight-bg-color: The generator will remove a path tag that breaks the icon. We need to add that special <path> back in.

   <path d="M0 12H16V16H0V12Z" fill="#D9D9D9" class="tox-icon-highlight-bg-color__color"/>
   

   • adobe-express: The generator removed a few required elements from the <svg /> like <pattern /> and <rect />, so the output from this generator is not used in kajabi-produts

UI example of the additional tag usage for highlight-bg-color. 👇 It allows TinyMCE to style the icon based on the color selected.