Skip to content

Commit 2840230

Browse files
committed
[Doc] Updates for UX Icons docs
1 parent 8bdfff0 commit 2840230

File tree

1 file changed

+20
-23
lines changed

1 file changed

+20
-23
lines changed

src/Icons/doc/index.rst

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,6 @@ Installation
1616
1717
$ composer require symfony/ux-icons
1818
19-
# To use provided on-demand icon sets, you also need HTTP client:
20-
$ composer require symfony/http-client
21-
2219
SVG Icons
2320
---------
2421

@@ -108,24 +105,26 @@ sizing utilities for consistency and theming:
108105
{# HTML syntax #}
109106
<twig:ux:icon name="bi:chat" class="size-4" />
110107

111-
To keep your design consistent and easily adjustable, consider defining a :ref:default attribute <icons_default_attributes>. This allows you to control the size of all your icons from a single place.
108+
To keep your design consistent and easily adjustable, consider defining a
109+
:ref:`default attribute <icons_default_attributes>`. This allows you to control
110+
the size of all your icons from a single place.
112111

113112
Icon Sets
114113
~~~~~~~~~
115114

116-
.. note::
115+
UX Icons gives you access to a wide variety of icon sets, each with its own
116+
style. This allows you to cover different needs while maintaining a consistent
117+
look and feel across your application.
117118

118-
To use icons from icon sets via `ux.symfony.com/icons`_, the ``symfony/http-client``
119-
package must be installed in your application:
119+
To download icons automatically from the many icon sets available, you must
120+
first install the following package in your application:
120121

121-
.. code-block:: terminal
122+
.. code-block:: terminal
122123
123-
$ composer require symfony/http-client
124+
$ composer require symfony/http-client
124125
125-
There are many icon sets available, each with their own unique style and set of
126-
icons, providing a wide range of icons for different purposes, while maintaining
127-
a consistent look and feel across your application. Here are some of the most
128-
popular icon sets available:
126+
Some of the most popular icon sets are shown below; for the complete list,
127+
visit `ux.symfony.com/icons`_.
129128

130129
======================== ======= ========== =============== =====================
131130
Icon Set Icons License Prefix Example
@@ -144,8 +143,6 @@ Icon Set Icons License Prefix Example
144143
`Tabler Icons`_ 5200 MIT ``tabler`` ``tabler:check``
145144
======================== ======= ========== =============== =====================
146145

147-
To see the full list of available icon sets, visit `ux.symfony.com/icons`_.
148-
149146
Search Icon sets
150147
~~~~~~~~~~~~~~~~
151148

@@ -200,8 +197,14 @@ HTML Syntax
200197
~~~~~~~~~~~
201198

202199
In addition to the ``ux_icon()`` function explained in the previous sections,
203-
this package also supports an alternative HTML syntax based on the ``<twig:ux:icon>``
204-
tag if the ``symfony/ux-twig-component`` package is installed:
200+
this package also provides an alternative HTML-based syntax. Before using it,
201+
ensure that the following package is installed in your application:
202+
203+
.. code-block:: terminal
204+
205+
$ composer require symfony/ux-twig-component
206+
207+
You can then use the following syntax to include icons::
205208

206209
.. code-block:: html
207210

@@ -215,11 +218,6 @@ tag if the ``symfony/ux-twig-component`` package is installed:
215218
<!-- you can also add any HTML attributes -->
216219
<twig:ux:icon name="user-profile" height="16" width="16" aria-hidden="true" />
217220

218-
.. tip::
219-
220-
To use the HTML syntax, the `symfony/ux-twig-component`_ package must be
221-
installed in your project.
222-
223221
Downloading Icons
224222
-----------------
225223

@@ -654,7 +652,6 @@ Learn more
654652
.. _`ux.symfony.com/icons`: https://ux.symfony.com/icons
655653
.. _`Iconify`: https://iconify.design
656654
.. _`symfony/asset-mapper`: https://symfony.com/doc/current/frontend/asset_mapper.html
657-
.. _`symfony/ux-twig-component`: https://symfony.com/bundles/ux-twig-component/current/index.html
658655
.. _`W3C guide about SVG icon accessibility`: https://design-system.w3.org/styles/svg-icons.html#svg-accessibility
659656
.. _`Bootstrap Icons`: https://github.com/twbs/icons
660657
.. _`Boxicons`: https://github.com/atisawd/boxicons

0 commit comments

Comments
 (0)