Welcome to TalkGraphics.com
Results 1 to 7 of 7
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Using Tabler Icons

    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:

    Code:
    <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:

    Click image for larger version. 

Name:	Screenshot 2021-01-15 15.43.26.png 
Views:	69 
Size:	7.9 KB 
ID:	128680

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

    Example:
    Code:
    <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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Using Tabler Icons

    Okay Acorn you've got me going again!!!

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

    Can you explain the Xara Widget Editor further because I'm lost.

    Here is an example for the Tabler Icons:

    Code:
    <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.

    Is this code in a text file or in a Xara page. Is it js code or CSS? Do you save this xar file as a .xwr ???

    I keep my XWRs in a Xara Widgets folder.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Using Tabler Icons

    Egg, I said 'Generator' not editor. It is an XML file format Xara uses for its Widgets. The extension is XWR. When used it creates the Placeholder code automatically Google maps is one.

    You save the text as I described: Tabler Icons.xwr.

    I am sorry my instructions have confused.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #4
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Using Tabler Icons

    This is how I did it, Egg:

    Open Notepad
    Copy Acorn's code and paste into Notepad
    In Notepad, click File > Save As
    Change 'Save as Type' to 'All Files (*.*)'
    In 'File Name' type Tabler Icons.xwr
    Open Xara and import/drag/drop your new file

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Using Tabler Icons

    @Chris, thank you.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Using Tabler Icons

    Thanks Chris. I'd already tried that and got:


    I occasionally get this, sometimes even with .xar files! Usually drag / drop on the title bar loads it but not this time.

    @Acorn I'm very easily confused these days.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.jpg 
Views:	48 
Size:	20.6 KB 
ID:	128687  
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Re: Using Tabler Icons

    Quote Originally Posted by Egg Bramhill View Post
    Thanks Chris. I'd already tried that and got:
    I occasionally get this, sometimes even with .xar files! Usually drag / drop on the title bar loads it but not this time.
    @Acorn I'm very easily confused these days.
    Egg, a XWR file can be handled in four ways:
    1. Add it and others through the Local Designs gallery > disc designs.
    2. Double-clicking the file.
    3. Dragging the file to the title bar.
    4. Dragging directly onto the design page.

    The first three will all created the Placeholder in the middle of the viewport of your design.
    The fourth, which I described, will place the icon where you drop it on the page.

    A double-click thereafter will open the Widget for a change/update.

    A Widget is therefore a quicker way to manage your design and works in a similar fashion to Right-click > Replace > Image/Symbol, instead it would be Right-click > Edit widget.
    For this last part to work the Widget needs to be somewhere permanent and Xara remembers its full path in the design file.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •