@dpc-sdp/ripple-icon

A configurable SVG, sprite-based icon set for use with ripple components.

Install

npm install @dpc-sdp/ripple-icon --save

Dependency graph

@dpc-sdp/ripple-icon
└── @dpc-sdp/ripple-global

Import

import { RplIcon, RplTextIcon } from '@dpc-sdp/ripple-icon'

Registering custom icons

e.g. arrow_right.js

import Icon from '@dpc-sdp/ripple-icon'

Icon.register({
  'custom_arrow_right': {
    width: 10,
    height: 10,
    paths: [
      {
        d: 'M0 10c0 5.524 4.476 10 10 10s10-4.476 10-10S15.524 0 10 0 0 4.476 0 10zm18.065 0A8.062 8.062 0 0110 18.065 8.062 8.062 0 011.935 10 8.062 8.062 0 0110 1.935 8.062 8.062 0 0118.065 10zM10.44 4.762l4.895 4.895c.19.19.19.496 0 .686l-4.895 4.895a.484.484 0 01-.686 0l-.79-.79a.483.483 0 01.008-.694l2.834-2.706H5.323a.485.485 0 01-.484-.483v-1.13c0-.266.217-.483.484-.483h6.483L8.972 6.246a.483.483 0 01-.008-.694l.79-.79c.19-.19.496-.19.686 0z'
      }
    ]
  }
})

Advanced usage

import Icon from '@dpc-sdp/ripple-icon'

Icon.register({
  'custom_arrow_right': {
    width: 10,
    height: 10,
    paths: [
      {
        d: 'M2.095 6.413c-.246-.503.002-1.09.551-1.316l9.818-4.007c.554-.226 1.195.002 1.44.504.247.503 0 1.091-.55 1.317L3.536 6.916a1.16 1.16 0 01-.444.087c-.418 0-.816-.22-.997-.59z',
        transform: 'translate(0 0.00300598)'
      },
      {
        d: 'M12.907 13.003c-.178 0-.36-.04-.527-.125L2.562 7.88c-.526-.27-.717-.878-.425-1.363.293-.483.956-.657 1.483-.39l9.818 4.997c.526.27.717.879.425 1.362-.2.33-.572.516-.956.516L5.875 5.971z',
        transform: 'translate(0 0.00300598)'
      },
    ],
    polygons: []
  }
})

Usage and Tests

See Storybook/Atoms/Icon/Icon Library.

See Storybook/Atoms/Icon/Icon.

See Storybook/Atoms/Icon/Text Icon.

License

Licensed under the Apache-2.0 License.