@onfido/castor-icons
    TypeScript icon, indicating that this package has built-in type declarations

    2.8.1 • Public • Published

    Castor Icons

    npm version Bundle size

    This is Castor addition providing a collection of selected Boxicons and custom icons.

    Get started

    Install package:

    npm install @onfido/castor-icons
    

    Then make icons available by following either plain/bundled code approach, or by using React components.

    Use with plain code

    When referring to a fragment identifier for an icon to be used, a link is made to icons.svg sprite through the <use> element. The sprite must be public, copy it from svg directory of this package, or configure the bundler to do so.

    Straight after this you can easily add an icon to your HTML code, e.g. "passport" if copied to same .castor-icons directory:

    <svg fill="currentColor" focusable="false" height="24" width="24">
      <use href="/.castor-icons/icons.svg#passport"></use>
    </svg>

    Use with bundled code

    Import sprite source to be used when referring to a fragment identifier for icon in JavaScript, like such:

    import icons from '@onfido/castor-icons/svg/icons.svg';
    
    document.body.innerHTML = `
      <svg fill="currentColor" focusable="false" height="24" width="24">
        <use href="${icons}#passport"></use>
      </svg>
    `;

    Your bundler must handle the icons.svg sprite asset for it to be available to public. For example, Parcel will do this for you automatically, but if you're using webpack then you should add and configure an additional loader like file-loader to handle svg file type.

    Use React components

    Every SVG icon is also exported as React component, e.g. "passport":

    import { IconPassport } from '@onfido/castor-icons';
    import React, { Fragment } from 'react';
    
    const Component = () => (
      <Fragment>
        <IconPassport />
        {/* ...anything else e.g. text */}
      </Fragment>
    );

    You may modify SVG appearance by passing component props such as "fill" for changing color (defaults to "currentColor"), or sizing with "height" and "width".

    But if you prefer to use a sprite, feel free to (only once) inline it in your app using the Icons component:

    import { Icons } from '@onfido/castor-icons';
    import React, { Fragment } from 'react';
    
    const App = () => (
      <Fragment>
        <Icons />
        {/* ...anything else e.g. app routes */}
      </Fragment>
    );

    Then refer to a fragment identifier directly without setting any sprite source, like this:

    const IconPassport = () => (
      <svg fill="currentColor" focusable="false" height="24" width="24">
        <use href="#passport"></use>
      </svg>
    );

    Use individual SVG icons (advanced)

    The nature of an <svg> element does not allow to embed individual icons, unfortunately.

    To use individual SVGs (also distributed within this package) one possible solution is to use CSS Masks, e.g. for "passport" icon:

    .icon-passport {
      display: inline-block;
      height: 24px;
      width: 24px;
      mask: url('~@onfido/castor-icons/svg/icon-passport.svg') no-repeat;
      mask-size: 100%;
      background-color: currentColor;
    }

    Then you're able to use such directly in your HTML:

    <i class="icon-passport"></i>

    Please keep in mind that the browser support is somewhat limited.

    Improve accessibility

    • Focus handling is broken in IE and Edge browsers. When embedding via an <svg> element, we recommend to set focusable="false".

    • Be mindful of screen readers by applying the appropriate aria- attributes depending on each icon context and intent, for example aria-hidden or aria-label.

    • Learn more about accessibility quirks

    Keywords

    none

    Install

    npm i @onfido/castor-icons

    DownloadsWeekly Downloads

    347

    Version

    2.8.1

    License

    Apache-2.0

    Unpacked Size

    541 kB

    Total Files

    562

    Last publish

    Collaborators

    • onfido-idv