Download the PHP package ympact/flux-icons without Composer
On this page you can find all versions of the php package ympact/flux-icons. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package flux-icons
Flux Icons
This is a laravel package to customize the icons for Livewire Flux. It builds the icons from various vendors into a flux:icon component.
[!NOTE]
This package is not in version 1 yet and the config scheme might still change in the next updates to account for different folder and file structures of icon vendors.
Installation
Generally you want to install this package only in your local development environment and build and publish the icons you need.
Icon Vendor Support
- Tabler Icons
- Flowbite
- Fluent UI Icons
- Google Material Design Icons
- MDI
[!NOTE]
In the current version of this package, the original svg paths of an icon are merged into a single path. It can therefore happen that some icons may not look like the original. Especially when Flux tries to show a solid variant of an icon that originally does not have a solid or filled version.
Known issues
Tabler
- Solid variant for icons that originally do not have a filled version are often not rendered properly.
Building icons
You will need to build the icons yourself once the package is installed. This can be done using the artisan command flux-icons:build you can optionally pass the vendor name as the first argument.
In case you did not provide this, the script will ask you.
Options
| Option | Description |
|---|---|
--icons= |
The icons to build (single or comma separated list). Cannot be used in combination with --all. |
-m\|--merge |
Merge the icons listed in the --icons options with the icons defined in the config. Cannot be used in combination with --all. |
-a\|--all |
Build all icons from the vendor. |
-v\|--verbose |
Show additional messages during build. |
The artisan script will try to install the icon package using npm install.
[!WARNING]
The--alloption might generate over thousands of files and causenpm run devto crash due to memory issues.
Usage
Since this package publishes all icons to resources/views/flux/icon/{vendor}/ you can simply use the Blade convention of referencing the icons within your flux:icon component. So for example:
or
Note on icon variants
Due to the way the flux icon component is made, it requires 4 variants: an outline and a solid of three sizes (24, 20, 16). For the first version of this Flux Icons package the source icons are treated as follows:
- In case there is only one solid size variant in the source package, it will use the same svg for all three size variants. Generally the svg will be scaled by the browser.
- In case there is no solid variant, it will use the outline variant as the solid variant.
- In case the solid variant does not have an outline variant, the icon is not exported at all.
Publish config
You can publish the config file to adjust settings for a specific vendor or add your own vendor. In case you add your own vendor, please share or make a PR so others can use it too!
Publish specific vendor callbacks
When adjusting the callback for an vendor, make sure you also publish the config file and reference the correct class.
Advanced configuration
| Option | Valaue | Description |
|---|---|---|
icons |
null or ['vendorName' => ['icon-name', ...] ] |
A list of icons that will be build/updated by default in case no icons are passed to flux-icons:build command. |
default_stroke_wdith |
float |
For outline icons a default stroke width can be configured. The default Flux Heroicons uses a width of 1.5. |
Vendor specific configuration
The vendor specific configuration sits within the vendors key. Each vendor should have a key. That key will be used as directory name when exporting the icons.
| Option | Value | Description |
|---|---|---|
vendor_name |
string |
Human readable name of the vendor. |
namespace |
string |
The namespace for the Flux icon, in case omitted, the vendor name will be used. |
package_name |
string |
The npm package that should be installed to retrieve the icons. |
source_directories.outline |
array\|string |
The directory in which the vendors outline icons reside. For specific options see below. |
source_directories.solid |
array\|string |
The directory in which the vendors solid icons reside. For specific options see below. |
transform_svg_path |
[class, method] |
A callback to transform the SVG path data. Takes a single parameter: the SVG path string. |
change_stroke_width |
[class, method] |
A callback to determine the whether the stroke width should be changed on this icon. |
Source directories
The source directories specify where the script can find the outline and solid/filled versions of the icons you want to build.
In case the vendor uses a prefix or suffix for the icons, we want to configure it here to determine the basename of the icon and make them more accessible in flux.
For both source directories (outline and solid), an optional filter callback can be defined to indicate whether a file in the directory should be used as outline or solid respectively.
For the outline icons, the function passes two params file and icons. The file is the actual filename that should be filtered out or not. The icons is an array of icons that the user requested to build. This is passed by reference in case this array needs to be adjusted. See the Mdi class as example.
For the solid icons, the filter callback passes a single param file. Optionally callbacks can be defined on dir, prefix and suffix to adjust these according to the icon size. The sizes passed to these callbacks are 24, 20 and 16 (the defaults of the Flux icon component).
Callbacks
The configuration file provides various options on which callback can be defined. To keep the config file serializable, the callbacks should be defined in a separate class and referenced as above. See vendor.php.stub for reference of the available callbacks.
Additional icons
This package also provide some custom icons that can be published:
They can be published using
-
An empty icon, can be useful for simple logic in your blade or components:
-
A placeholder avatar icon, usin an icon or initials
This icon has additional properties:
- icon
(void|string): uses the Heroicon user icon as image. - name
(string): instead of an icon two initials of a name will be shown. You can pass the full name (Maurits Korse) or just the initials (MK) - color
(string): colorizing the icon using the same as Flux badges
- icon
Roadmap
- Add/Improve command for updating/rebuilding icons
- Improve fallback handling for non-existing solid icons
- Adding more vendors
All versions of flux-icons with dependencies
illuminate/support Version ^10.0|^11.0
livewire/flux Version ^1.0
illuminate/console Version ^10.0|^11.0
illuminate/view Version ^10.0|^11.0
symfony/console Version ^6.0|^7.0
livewire/livewire Version ^3.5
laravel/prompts Version ^0.1|^0.2|^0.3