PHPackages                             sevengroupfrance/sulu-icon-picker-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. sevengroupfrance/sulu-icon-picker-bundle

ActiveLibrary

sevengroupfrance/sulu-icon-picker-bundle
========================================

v1.0.4(3y ago)11.7k↓50%1[1 issues](https://github.com/sevenGroupFrance/sulu-icon-picker-bundle/issues)MITJavaScript

Since Dec 10Pushed 3y ago1 watchersCompare

[ Source](https://github.com/sevenGroupFrance/sulu-icon-picker-bundle)[ Packagist](https://packagist.org/packages/sevengroupfrance/sulu-icon-picker-bundle)[ RSS](/packages/sevengroupfrance-sulu-icon-picker-bundle/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)DependenciesVersions (8)Used By (0)

sevengroupfrance/sulu-icon-picker-bundle
========================================

[](#sevengroupfrancesulu-icon-picker-bundle)

Inspired by [this pull request](https://github.com/sulu/sulu-demo/pull/66).

What is this bundle's goal?
---------------------------

[](#what-is-this-bundles-goal)

Importing a custom fonctionality into [sulu](https://github.com/sulu/sulu), in this example, a custom content type.
This bundle will use an icon library from [IcoMoon](https://icomoon.io/).

[![How the icon picker looks in sulu's admin](assets/images/ip-8.png)](assets/images/ip-8.png)

Installation
------------

[](#installation)

1. Download the [package](https://packagist.org/packages/sevengroupfrance/sulu-icon-picker-bundle) in your project with the following command line:
    `composer require sevengroupfrance/sulu-icon-picker-bundle`.
2. In `config/bundles.php` add the following code:
    `SevenGroupFrance\SuluIconPickerBundle\FontIconPickerBundle::class => ['all' => true]`.
3. In `assets/admin/package.json`, add the following line in the "dependencies" object:
    `"sulu-icon-picker-bundle": "file:node_modules/@sulu/vendor/sevengroupfrance/sulu-icon-picker-bundle/src/Resources/js"`.
4. In `assets/admin`, `npm install` to initialize the bundle's symlink directory.
5. In `assets/admin/index.js`, add this line:
    `import 'sulu-icon-picker-bundle'`.
6. In `assets/admin`, `npm run watch` or `npm run build`

Create your own icon list with IcoMoon
--------------------------------------

[](#create-your-own-icon-list-with-icomoon)

From [this page](https://icomoon.io/app/#/select), we can choose whatever icons we want to use. If you want to import a library, click here:
[![click on the icon with the books in it](assets/images/ip-5.png)](assets/images/ip-5.png)

From here, you can choose whatever library you want by clicking on the `+  Add` button.
[![click on the add button to add this library to your selection](assets/images/ip-6.png)](assets/images/ip-6.png)

Then, choose the icons you want to use in your project by clicking on them or select all in the menu on the top right side of your selection. In the bottom menu, click on the `Generate SVG & More` button.
From here, you may want to name your icons accordingly as there is a search functionality to this icon picker. Once done, click on the "download" button.

In the file you just downloaded, you'll need two files: `selection.json` and `symbol-defs`. Replace the bundle's `selection.json` file content with your own, and replace the bundle's `Iconlist.js` file's `` tags content with your own. If you want to put the entire SVG in `Iconlist.js`'s return function, please be careful to convert inline style with react style (from string to object).

Configure your own list (since 1.0.4)
-------------------------------------

[](#configure-your-own-list-since-104)

First, create a `iconlist` folder in your `assets/admin` folder. Then, create a `Iconlist.js` where you'll create a React functionnal component:

```
import * as React from 'react';

const Iconlist = () => {
}

export default Iconlist

```

Then, add the `svg` file content directly in a `return` function, like this:

```
import * as React from 'react';

const Iconlist = () => {
  return(

        **your  here**

  )
}

export default Iconlist

```

### ALWAYS REMEMBER TO CONVERT YOUR HTML PROPERTIES TO REACT PROPERTIES SYNTAX

[](#always-remember-to-convert-your-html-properties-to-react-properties-syntax)

example: `