Download the PHP package slashworks/contao-simple-svg-icons-bundle without Composer

On this page you can find all versions of the php package slashworks/contao-simple-svg-icons-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

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 PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • 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.
Please rate this library. Is it a good library?

Example code of slashworks/contao-simple-svg-icons-bundle

Informations about the package contao-simple-svg-icons-bundle

Contao 4 Simple SVG Icons Bundle

About

With this extension you can easily add SVG icons from an icon-sprite file to your website via Contao Inserttags.
It also allows to output inline SVG from an SVG file in the file system.

Installation

Install with .
After updating the database, select the SVG icon sprite file in the settings of your theme. Use the new field icon files to select the SVG icon sprite file. The icons you can use are taken from this file.
For an easy start, download the example-sprite.svg and place it inside the files folder of your contao installation.

An SVG icon sprite file is a collection of multiple SVG icons, defined within a .
The menu icon for example looks like this:

The important part for using this icon is the id of the symbol.

For further information about creating your own SVG icon sprite file you can check out A Guide to Create and Use SVG Sprites.

Usage

SVG Sprite

When you want to output a symbol from an SVG sprite, the base format is
.
The rendered output:

Inline SVG

You can also output an SVG file inline.
Instead of the symbol's id you have to provide the UUID of the SVG file in the file system:

The rendered output:

Parameters

You can pass additional parameters to the insert tag:

class:
This adds the given string as CSS class to the svg element and will be rendered as:

id:
This adds the given string as CSS ID to the svg element and will be rendered as:

width:
The width parameter only works with inline SVG.
If the width property is set without a height property, the extension tries to get the aspect ratio from already existing width/height attributes or the viewBox attribute and sets the height accordingly. You can always overwrite this with CSS.

height:
The height parameter only works with inline SVG.
If the height property is set without a width property, the extension tries to get the aspect ratio from already existing width/height attributes or the viewBox attribute and sets the width accordingly. You can always overwrite this with CSS.

You can use multiple parameters in any combination:

Tips

The main purpose for svg icons is to use them in conjuction with text, e. g. menu burger, contact information, slider ui elements, …. As a starting point for the CSS styling of the svg icons you could use the following definitions:

This will scale the icon according to the font-size of the parent element.
Additionally, the vertical positioning requires some further adjustments for fine tuning. You can try to use vertical-align, relative positioning with some top or bottom values, or make the parent a flex-container and use align-items to properly position the enclosed icon.

Example: Burger Menu

Lets walk through a burger menu example.
We want to use the icon_menu_24px from the example sprite, so our inserttag looks like this:

The HTML code with the inserttag:

After setting the font-size for the button and the width for the svg, it will look like this:

Finally we adjust the vertical alignment of the icon:

When using the recommended CSS from the tips section, the SVG icon will inherit from the button.

Of course you can define a different color for the SVG icon itself:

Backend widget for icon selection

The extension contains a custom backend widget to make the icon selection easy and intuitive.
To use the widget, use the following code as reference.

Example dca file, e. g. tl_content

Example language file

Licensing

This contao module is licensed under the terms of the LGPLv3.

Credits

The icons used in the example sprite have been taken from Google Material Icons.

All versions of contao-simple-svg-icons-bundle with dependencies

PHP Build Version
Package Version
Requires contao/core-bundle Version ^5.2
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package slashworks/contao-simple-svg-icons-bundle contains the following files

Loading the files please wait ....