Funda Icons

This package contains optimized SVG icons to be used on Funda

Usage

---

Installation

npm install @funda/icons

ESM import

import { ThumbsDown } from "@funda/icons/lib/esm";
import Alert from "@funda/icons/lib/esm/alert";

CJS import

const { ThumbsDown } = require("@funda/icons/lib/cjs");
const Alert = require("@funda/icons/lib/cjs/alert");

Both ESM and CJS format will return:

{
    title: 'thumbs-down',
    svg: '<svg role="img" viewBox="0 0 24 24" ...'
}

Vue import

import { ThumbsDown } from "@funda/icons/lib/vue";
import Alert from "@funda/icons/lib/vue/alert";

export default {
    ...,
    components: { ThumbsDown }
    ...,
}

Alternative

You might not want to use the icons directly into your JS application. In that case the raw SVG icons are also available on the package, you just need to copy to you project.

cp node_modules/@funda/icons/assets/* src/SPECIFY_YOUR_PATH

Adding new icons

---

1. Create a new branch
2. Add the svg of the new icon in the assets folder
3. Commit your changes, following the rules of commitlint
4. npm run build
5. Create a pull request against the master branch

Committing changes

This repo uses commitlint, which means that it follows specific commit message rules, If the messages are not on the expected format it wont be possible to commit/push your changes. These commits will automatically release new versions to NPM based on the rules of semantic-release.

Examples of commit messages

• feat(branch_name): commit message
• fix(branch_name): commit message

PS: It is recommended to use the terminal for commit, if you use any GUI it might be necessary to update you local variable PATH on your GUI. Reference: Husky issues

Creating new icons

---

Using Illustrator

Most of our icons are designed in Illustrator. For these instructions I take the file with all icons as the reference. You can find this file in the shared UX folder. Designing and exporting icons using Illustrator is preferred, since this will result in the properly aligned icons and optimized exports.

1. Hide all unnecessary layers, like the Grid
2. Go to File > Export > Export for Screens...
3. Select 'SVG' as format and set a export location to your likings
4. Give the icon a proper name in the left panel
5. Click Export Artboard. The folder with the exported SVG appears automatically

Using Sketch

If a icon is originally designed in Sketch, you'll need to do some manual steps for a proper export. This is because exporting in Sketch works in a different way.

1. Select the artboard of the icon you want to export, hide all unnecessary if needed.
2. Make sure 'SVG' is selected as a preset in the right panel
3. Export the icon with Export Selected... and select the location where you want to store te file
4. After exporting, open de SVG file using your favorite code editor
5. Remove the width and height properties from the <svg /> tag, but leave the viewbox property untouched

Other information

---

We have a pre-commit hook that will optimize the svg icons using svgo

• All default configuration from svgo are applied, including make everything inline;
• role="img" is added;
• Dimensions, i.e: width and height are removed

---

Latest

https://funda-frontend.github.io/icons/latest/