Using Tabler Icons

[Acorn]

Xara suggests Tabler Icons as a free resource (https://www.xara.com/free-design-resources/) but then fails on how they should be used.

A little used Xara tool is the Xara Widget Generator that is created as a XWR file.

Here is an example for the Tabler Icons:

<XaraWidget>
<WidgetName>SVG Icon Generator</WidgetName>
<CreateURL>https://tablericons.com</CreateURL>
<BrowserWidth>1280</BrowserWidth>
<BrowserHeight>960</BrowserHeight>
<WidgetHelp>
- Pick your icon and design it
- Click to copy to your Clipboard
- Click on the Insert button.
</WidgetHelp>
</XaraWidget>

Copy this into a file and save as Tabler Icons.xwr.
I keep my XWRs in a Xara Widgets folder.

In use:

• Drag Tabler Icons.xwr from the saved folder directly onto the position on to your design and Drop.
• An IE (!) window open with the Icons accessible to tweak and pick. This window is a wrapper with three bottom Buttons: Insert, Cancel, Help.
  
  • Cancel closes the modal window, leaving your design unchanged.
  • Help simply lists the <WidgetHelp> instructions.
  • The use of Insert is described below:
  
  
• Search for an icon and change its Size, Thickness and Colour as required.
• Click the icon.
• Finally, click the Insert Button.

The picked icon will be added to your design as a Placeholder. Its size cannot be adjusted directly - more later.

Modifications
If you need to alter it, right-click > Edit widget and the modal window re-opens.
Change it or its design and Copy and Insert as above.
Bug - @Xara, this procedure currently can result an an Error:



Workaround

• AT WORST - Delete and repeat the above making the required changes.
• FLEXIBLE - Open its Web Properties > Placeholder > Placeholder > HTML code (body)

Example:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-antenna-bars-4" width="80" height="80" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ff4500" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <line x1="6" y1="18" x2="6" y2="15" />
  <line x1="10" y1="18" x2="10" y2="12" />
  <line x1="14" y1="18" x2="14" y2="9" />
  <line x1="18" y1="18" x2="18" y2="18.01" />
</svg>

Modifications:

• Change to width="100%" height="100%" - this sizes the icon to the smaller of its Placeholder dimensions.
• Change to a sensible value, e.g., stroke-width="10" produces a nice cloud shape, losing the concept of the original antenna bars.
• Change the colour of the stroke="#ff4500" to a named HTML Common Colour or Hex value.
• Get @Egg to weaponise the SVG Paths.

You could just open the Tabler Icons website directly and pick an Icon and put into a Placeholder...
...I prefer the versatility of the Widget.

(!) Bug - @Xara, please get rid of this IE dependency. Other XWRs you have created now fail in v17.

Acorn