Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@rocket.chat/icons

Package Overview
Dependencies
Maintainers
0
Versions
729
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rocket.chat/icons

Rocket.Chat's Icons

  • 0.39.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

Rocket.Chat

@rocket.chat/icons

Rocket.Chat's Icons


npm@latest npm@next npm downloads License: MIT

deps npm bundle size

Install

Add @rocket.chat/icons as a dependency:

npm i @rocket.chat/icons

# or, if you are using yarn:

yarn add @rocket.chat/icons

Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check the issues.

Adding new icons

All the icons should be designed by Rocket.Chat's design crew, following some conventions:

  • The view box must have the dimensions of 32x32 units;
  • Any horizontal assimetry must follow the left-to-right direction.
  • The icon must be published on Figma.

As the icons might be arbitrarily scaled, the chosen source format for individual icon graphics is SVG. As Figma can export graphics with some additional SVG attributes and elements, they must be removed:

  • The <svg> element must contain only two attributes: viewBox (probably with the value of"0 0 32 32") and xmlns;
  • XLink references (e.g. masks and clip paths) must be discarded;
  • The <path> elements must keep only the d attribute, with no additional styling attribute;
  • <g> and other elements must be stripped by some optimization tooling, keeping only <path> elements.

The src/ directory holds all the SVG icons that would be processed. The filenames define the icon names, so they should stick with a basic rule: an icon name must describe the icon shape, not its utility. For instance:

  • message.svg (wrong)
  • balloon.svg (right)

If the icon must be mirrored for right-to-left read direction, it required to add a trailing .dir before the file extension (e.g. backspace.dir.svg).

Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

yarn build

Linting

To ensure the source is matching our coding style, we perform linting. Before commiting, check if your code fits our style by running:

yarn lint

Some linter warnings and errors can be automatically fixed:

yarn lint-and-fix

Usage

To use the fuselage icons, you need to import the css first:

@import url('@rocket.chat/icons/dist/rocketchat.css');

Usage Example:

<!-- Using Fuselage's Icon Component (Recommended) -->
<Icon name="hash" size="x20" />

<!-- HTML markup -->
<i class="rcx-icon">{icon}</i>

FAQs

Package last updated on 15 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc