Skip to content

Commit 8f89aa7

Browse files
committed
Update doc
1 parent de850a1 commit 8f89aa7

File tree

4 files changed

+14
-40
lines changed

4 files changed

+14
-40
lines changed

src/Icons/CHANGELOG.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
## 2.30
44

55
- Ensure compatibility with PHP 8.5
6-
- Fix icon color for fill and stroke attributes
76

87
## 2.29.0
98

src/Icons/doc/index.rst

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,20 @@ the size of all your icons from a single place.
112112
Icon Color
113113
~~~~~~~~~~
114114

115-
Typically, SVG icons use ``fill="currentColor"`` to inherit the color of the containing element.
116-
You can set the color in CSS on the container or directly on the SVG element/class.
115+
By default, SVG icons rendered by UX Icons use ``fill="currentColor"``.
116+
You can change the icon color in several ways:
117117

118+
You can use the CSS color property to modify your icon through a CSS class.
119+
120+
.. code-block:: html+twig
121+
{{ ux_icon('user-profile', {class: 'my_class'}) }}
122+
123+
Or you can just as easily use the color attribute.
124+
125+
.. code-block:: html+twig
126+
{{ ux_icon('user-profile', {color: 'red'}) }}
127+
128+
Both will indirectly apply a potential value for currentColor.
118129

119130
Icon Sets
120131
~~~~~~~~~

src/Icons/src/Icon.php

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ public static function fromFile(string $filename): self
131131
}
132132

133133
public function __construct(
134-
private string $innerSvg,
134+
private readonly string $innerSvg,
135135
private readonly array $attributes = [],
136136
) {
137137
}
@@ -155,14 +155,6 @@ public function toHtml(): string
155155
continue;
156156
}
157157

158-
if ('fill' === $name) {
159-
$this->innerSvg = str_replace('fill="currentColor"', "fill=\"{$value}\"", $this->innerSvg);
160-
}
161-
162-
if ('stroke' === $name) {
163-
$this->innerSvg = str_replace('stroke="currentColor"', "stroke=\"{$value}\"", $this->innerSvg);
164-
}
165-
166158
$value = htmlspecialchars($value, \ENT_QUOTES | \ENT_SUBSTITUTE, 'UTF-8');
167159
$htmlAttributes .= '="'.$value.'"';
168160
}

src/Icons/tests/Unit/IconTest.php

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -124,15 +124,6 @@ public function testWithAttributes(array $attributes, array $withAttributes, arr
124124
$this->assertSame($expected, $icon->getAttributes());
125125
}
126126

127-
/**
128-
* @dataProvider provideRenderAttributeColorModifiers
129-
*/
130-
public function testColorModifierWithFillAttributeSet(array $attributes, string $innerSvg, string $expected)
131-
{
132-
$icon = new Icon($innerSvg, $attributes);
133-
$this->assertStringStartsWith($expected, $icon->toHtml());
134-
}
135-
136127
public static function provideIdToName(): iterable
137128
{
138129
yield from [
@@ -299,23 +290,4 @@ public function testSerialize()
299290

300291
$this->assertEquals($icon, unserialize(serialize($icon)));
301292
}
302-
303-
public static function provideRenderAttributeColorModifiers(): iterable
304-
{
305-
yield 'it_renders_with_attribute_fill_set' => [
306-
['fill' => 'red'],
307-
'<path fill="currentColor" d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>',
308-
'<svg fill="red"><path fill="red" d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/></svg',
309-
];
310-
yield 'it_renders_with_attribute_stroke_set' => [
311-
['stroke' => 'red'],
312-
'<path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 4v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2m6-16v2m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v10m6-16v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2"/>',
313-
'<svg stroke="red"><path fill="currentColor" stroke="red" stroke-linecap="round" stroke-width="2" d="M6 4v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2m6-16v2m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v10m6-16v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2"/></svg>',
314-
];
315-
yield 'it_renders_with_attribute_stroke_and_fill_set' => [
316-
['fill' => 'red', 'stroke' => 'blue'],
317-
'<path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 4v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2m6-16v2m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v10m6-16v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2"/>',
318-
'<svg fill="red" stroke="blue"><path fill="red" stroke="blue" stroke-linecap="round" stroke-width="2" d="M6 4v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2m6-16v2m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v10m6-16v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2"/></svg>',
319-
];
320-
}
321293
}

0 commit comments

Comments
 (0)