markawesome 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c03fbaecd8dec3c16fa5e2ddeb07b12d2eb35ad2fbc8389a49b725d77a3c2cf
-  data.tar.gz: 6b530bf8caae7b8717411b111e6e3e6f9fb6766373d0b80238cb3fa4ec7f98d6
+  metadata.gz: bd4d3d594adb8f57319bfbb9b353d9e1557cf9949417a4da62bd2e8e5f736ed3
+  data.tar.gz: e1018086c23e3c38f24312fb5a16c5194260083253e17100c7d591a9c93de25f
 SHA512:
-  metadata.gz: 6e2b2e8804309e702139068db433be5cbb62132eede58ff45a25d871b721bc2adab4a23d34b820ed8dda26907de2d51ab277b30a13f5d9037e3d26efd123d91f
-  data.tar.gz: 8ba50a46d31a068af6ae3d2dc28c2832d26b665e4a006fc74b34f5c59ee0a12596f4f8a7a1a98d7412f0150fe25215d3772521fe6fcaff5f1154c69ac91fc684
+  metadata.gz: f3934636dd055cd7e418b276a1eae04f06f4c5a7527213ea6e59cdfd907cd8e9db0874a71790255891a559b907360889202205b36c15d6fa6b2a8c9454ab9c73
+  data.tar.gz: 83627f19b8439b91f2e2ac241cab1061546b2d50b267aa1096c2a3b96b4ee7b561d3bb53628cbeed2f285a07205331653fd1b6200d746cc0c2362bcfa7333bef

data/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.0] - 2026-02-16
+
+### Added
+
+- **IconTransformer: Size support** — Append a size token to control icon font-size via inline style. Primary syntax uses `:` separator (`$$$settings:lg`), alternative syntax uses space (`:::wa-icon settings lg`). Available sizes: `xs` (0.75em), `sm` (0.875em), `lg` (1.25em), `xl` (1.5em), `2x` (2em), `3x` (3em), `4x` (4em)
+- **IconTransformer: Custom SVG icons** — Use a file path starting with `/` or `./` to render `<wa-icon src="...">` instead of `<wa-icon name="...">`. Supports sizes too (`$$$/assets/icons/shoe.svg:2x`)
+
 ## [0.6.0] - 2026-02-14
 
 ### Changed

data/README.md

@@ -23,11 +23,50 @@ Used as the transformation engine for the [jekyll-webawesome](https://github.com
 | **Copy Button** | `<<<` | `:::wa-copy-button` | `<wa-copy-button value="content">content</wa-copy-button>` |
 | **Details** | `^^^appearance? icon-placement?` | `:::wa-details appearance? icon-placement?` | `<wa-details>content</wa-details>` |
 | **Dialog** | `???params?` | `:::wa-dialog params?` | `<wa-dialog>` with trigger button and content |
-| **Icon** | `$$$icon-name` | `:::wa-icon icon-name` | `<wa-icon name="icon-name"></wa-icon>` |
+| **Icon** | `$$$icon-name` or `$$$icon-name:size` | `:::wa-icon icon-name [size]` | `<wa-icon name="icon-name"></wa-icon>` |
 | **Image Dialog** | `![alt](url)` | — | Wraps images in clickable `<wa-dialog>` overlays |
 | **Tab Group** | `++++++` | `:::wa-tabs` | `<wa-tab-group><wa-tab>content</wa-tab></wa-tab-group>` |
 | **Tag** | `@@@brand` | `:::wa-tag brand` | `<wa-tag variant="brand">content</wa-tag>` |
 
+## Icon
+
+### Named icons
+
+Use a Web Awesome icon name:
+
+```markdown
+Click $$$settings to configure.
+A large $$$home:lg icon.
+```
+
+### Custom SVG icons
+
+Point to a local SVG file by starting the path with `/` or `./`:
+
+```markdown
+$$$/assets/icons/shoe.svg
+$$$/assets/icons/shoe.svg:2x
+$$$./icons/logo.svg:xl
+```
+
+This outputs `<wa-icon src="/assets/icons/shoe.svg"></wa-icon>` instead of using the `name` attribute.
+
+### Sizes
+
+Append a size token after `:` (primary syntax) or as a space-separated parameter (alternative syntax):
+
+| Token | CSS `font-size` |
+|-------|----------------|
+| `xs`  | 0.75em         |
+| `sm`  | 0.875em        |
+| `lg`  | 1.25em         |
+| `xl`  | 1.5em          |
+| `2x`  | 2em            |
+| `3x`  | 3em            |
+| `4x`  | 4em            |
+
+Without a size token, the icon inherits the surrounding font size.
+
 ## Layout Utilities
 
 Layout utilities use `::::` (quadruple colon) syntax to wrap content in CSS layout containers. Inner content is not markdown-converted, so component `:::` syntax inside layouts works normally.

data/lib/markawesome/transformers/icon_transformer.rb

@@ -4,30 +4,46 @@ require_relative 'base_transformer'
 
 module Markawesome
   # Transforms icon syntax into wa-icon elements
-  # Primary syntax: $$$icon-name
-  # Alternative syntax: :::wa-icon icon-name
+  # Primary syntax: $$$icon-name or $$$icon-name:size
+  # Custom SVG syntax: $$$/path/to/icon.svg or $$$/path/to/icon.svg:size
+  # Alternative syntax: :::wa-icon icon-name [size] or :::wa-icon /path/to/icon.svg [size]
   #
   # Examples:
   # $$$settings -> <wa-icon name="settings"></wa-icon>
-  # $$$home -> <wa-icon name="home"></wa-icon>
-  # $$$user-circle -> <wa-icon name="user-circle"></wa-icon>
+  # $$$settings:lg -> <wa-icon name="settings" style="font-size: 1.25em;"></wa-icon>
+  # $$$/assets/icons/shoe.svg -> <wa-icon src="/assets/icons/shoe.svg"></wa-icon>
+  # $$$/assets/icons/shoe.svg:2x -> <wa-icon src="/assets/icons/shoe.svg" style="font-size: 2em;"></wa-icon>
+  #
+  # Available sizes: xs (0.75em), sm (0.875em), lg (1.25em), xl (1.5em), 2x (2em), 3x (3em), 4x (4em)
   class IconTransformer < BaseTransformer
+    SIZES = {
+      'xs' => '0.75em',
+      'sm' => '0.875em',
+      'lg' => '1.25em',
+      'xl' => '1.5em',
+      '2x' => '2em',
+      '3x' => '3em',
+      '4x' => '4em'
+    }.freeze
+
     def self.transform(content)
       # Protect code blocks first
       protected_content, code_blocks = protect_code_blocks(content)
 
       # Apply primary syntax transformation
-      # Only block patterns that look like incomplete icon names:
-      # $$$icon name (where 'icon name' could be intended as one identifier)
-      result = protected_content.gsub(/\$\$\$([a-zA-Z0-9\-_]+)(?![a-zA-Z0-9\-_]|\s+name\b)/) do
-        icon_name = ::Regexp.last_match(1)
-        build_icon_html(icon_name)
+      # Supports named icons ($$$settings:lg) and custom SVG paths ($$$/path/to/icon.svg:2x)
+      result = protected_content.gsub(%r{\$\$\$(\.?/[a-zA-Z0-9\-_./]+|[a-zA-Z0-9\-_]+)(?::([a-zA-Z0-9]+))?(?![a-zA-Z0-9\-_]|\s+name\b)}) do
+        icon_ref = ::Regexp.last_match(1)
+        size = ::Regexp.last_match(2)
+        build_icon_html(icon_ref, size)
       end
 
       # Apply alternative syntax transformation
-      result = result.gsub(/:::wa-icon\s+([a-zA-Z0-9\-_]+)\s*\n:::/m) do
-        icon_name = ::Regexp.last_match(1)
-        build_icon_html(icon_name)
+      # Supports named icons and custom SVG paths with optional size
+      result = result.gsub(%r{:::wa-icon\s+(\.?/[a-zA-Z0-9\-_./]+|[a-zA-Z0-9\-_]+)(?:\s+([a-zA-Z0-9]+))?\s*\n:::}m) do
+        icon_ref = ::Regexp.last_match(1)
+        size = ::Regexp.last_match(2)
+        build_icon_html(icon_ref, size)
       end
 
       # Restore code blocks
@@ -37,12 +53,20 @@ module Markawesome
     class << self
       private
 
-      def build_icon_html(icon_name)
-        # Clean and validate icon name
-        clean_name = icon_name.strip
+      def build_icon_html(icon_ref, size = nil)
+        clean_ref = icon_ref.strip
+
+        # Paths (starting with / or ./) use src attribute, otherwise use name
+        attr = if clean_ref.include?('/')
+                 "src=\"#{clean_ref}\""
+               else
+                 "name=\"#{clean_ref}\""
+               end
+
+        # Build style attribute for size
+        style = SIZES[size] ? " style=\"font-size: #{SIZES[size]};\"" : ''
 
-        # Return the wa-icon element
-        "<wa-icon name=\"#{clean_name}\"></wa-icon>"
+        "<wa-icon #{attr}#{style}></wa-icon>"
       end
 
       def protect_code_blocks(content)

data/lib/markawesome/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Markawesome
-  VERSION = '0.6.0'
+  VERSION = '0.7.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markawesome
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Janne Waren