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 still work in progress. Hence icons might not turn out to be as they should 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
Initial support:
[!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.
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. Note: this might generate over thousands of files and cause npm run dev to crash due to memory issues. |
-v\|--verbose |
Show additional messages during build. |
The artisan script will try to install the vendor's icon package using npm install.
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
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_width |
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 | Default | Description |
|---|---|---|---|
vendor |
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 |
string |
The npm package that should be installed to retrieve the icons. | |
baseVariant |
string |
outline |
The default variant to use as basis. Generally the vendors variant that has the most icons. |
variants |
array |
The configuration for each of the variants (outline, solid, mini, micro). | |
attributes |
[class, method] |
null |
A callback to adjust the attributes on the SVG. |
transform |
[class, method] |
null |
A callback to transform the SVG path data. |
stroke_width |
[class, method] |
null |
A callback to determine the whether the stroke width should be changed on this icon. |
Variants
| Option | Value | Default | Description |
|---|---|---|---|
source |
string\|callable array |
||
template |
string |
||
fallback |
string\|callable array |
||
stroke_width |
int\|float |
||
size |
int |
||
attributes |
array |
`` | |
base |
string |
null |
Source
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).
Fallbacks for icon variants
Due to the way the flux icon component is made, it requires 4 variants: an outline and a solid of three sizes:
- solid - 24px
- mini - 20px
- micro - 16px
Using the configuration of the vendor, you can determine how to handle the building of the icon when there is no source file for a certain variant. Thhe options are
| Value | Description |
|---|---|
false |
|
default |
|
{variant} |
|
callback array |
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, using 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
- Adding more vendors
- Helper script to create configurations for new vendors
- Improving testing
- Documentation
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