Download the PHP package c1/c1-svg-viewhelpers without Composer

On this page you can find all versions of the php package c1/c1-svg-viewhelpers. 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?

Informations about the package c1-svg-viewhelpers

C1 SVG viewhelpers

SVG related ViewHelpers for TYPO3 Fluid.

Installation

via composer:

Configuration

  1. Include the static TypoScript setup and constants
  2. Create a symbols file and CSS (or SCSS or LESS) classes, see below
  3. Include the generated S(CSS) or LESS files
  4. Configure the presets in the TypoScript constants and or setup, i.e. set plugin.tx_c1svgviewhelpers.settings.svg.symbol.presets.default to point to the generated symbol file and add more preset keys if needed. For convenience you should always keep the default key which allows you to use the svgvh:symbol viewhelper without providing the symbolFile argument.
  5. Add basic CSS for the icons to properly display. E.g. if your icons are prefixed with .icon-default:

ViewHelpers

svgvh:symbol

Renders an icon from an SVG symbol file. The icon is wrapped in a span tag as SVG with an xlink:href attribute referencing an external SVG symbols file.

Using an SVG symbols file has some benefits, e.g.

See below for more information about SVG symbol files and how to generate them.

Usage

will output something like:

Arguments

attribute Description Type default required
identifier icon id in the symbols file string yes
symbolFile Preset identifier or path to file, also supports EXT: notation string default no
baseClass Prefix for the icon's class names string icon-default no
role role for accessibility string graphics-symbol no
ariaLabel Sets the aria-label on the svg tag for accessibility string no
cacheBuster Add a cache buster parameter to the symbolFile url bool true no
preload Preload the symbols file by inserting a link rel="preload" tag bool false no

In addition all universal tag attributes are supported:

class, dir, id, lang, style, title, accesskey, tabindex and onclick

Creating SVG symbols file and SCSS

There are many ways to create the needed symbols file and there are plugins for webpack, gulp, grunt etc.

One simple solution is to install the npm package svg-sprite which we can use to create the symbol file from a set of svg icons and also generated an SCSS file which contains the icon dimensions.

Create a svg-sprite.config.json for svg-sprite:

Then run svg-sprite while providing the path to your svg icons:

If successful, this will generate

Notes

To be able to style the icons using CSS you need to prepare the single SVG files:

Assuming you want to be able to style the stroke or fill color of an icon, replace its color value with 'currentValue' to make it use the parents color.

See https://stackoverflow.com/questions/13000682/how-do-i-have-an-svg-image-inherit-colors-from-the-html-document

Changelog

CHANGELOG.md

All versions of c1-svg-viewhelpers with dependencies

PHP Build Version
Package Version
Requires typo3/cms-core Version ^11 || ^12
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 c1/c1-svg-viewhelpers contains the following files

Loading the files please wait ....