r6operators

React package

Live demo →

r6operators is a collection of high-quality vectorized Rainbow Six: Siege Operator icons & metadata for Node.js.

This project started as way for people to get high-resolution operator icons for Rainbow Six: Siege operators, especially as vector graphics gained popularity in web development in the recent years. All icons have been remade by hand and they got the same aspect ratio & alignment for more consistent usage.

This is a fork of the original r6operators project by @marcopixel, maintained with updated operators and dependencies.

Usage

1. Install

Install the package with npm:

npm install @zerobertoo/r6operators

2. Use it

// named imports
import { ace, alibi, getSVGIcon } from "@zerobertoo/r6operators"

// default import (all operators + getSVGIcon as one object)
import r6operators from "@zerobertoo/r6operators"

alibi
// {
// 	  id: 'alibi',
// 	  name: 'Alibi',
// 	  role: 'Defender',
// 	  org: 'GIS',
//    squad: 'VIPERSTRIKE',
// 	  ratings: {
// 		  health: 1,
// 		  speed: 3,
// 		  difficulty: 3
// 	  },
// 	  meta: {
// 		  gender: 'f',
// 		  country: 'it',
// 		  season: 'Y3S2',
// 		  height: 171,
// 		  weight: 63,
//      price: 10000
// 	  },
// 	  bio: {
// 		  real_name: 'Aria de Luca',
// 		  birthplace: 'Tripoli, Lybia'
// 	  },
// 	  svg: {
// 		  contents: [SVG Contents],
// 		  attributes: {
// 			  xmlns: 'http://www.w3.org/2000/svg',
// 			  viewBox: '0 0 350 350',
// 			  style: 'enable-background:new 0 0 350 350',
// 			  space: 'preserve',
// 			  class: 'r6operators r6operators-alibi'
// 		  }
// 	  },
// 	  toSVG: [Function]
// }

alibi.toSVG()
// <svg class="r6operators r6operators-alibi" ... >...</svg>

alibi.toSVG({ class: "large", "stroke-width": 2, color: "red" })
// <svg class="r6operators r6operators-alibi large" stroke-width="2" color="red" ... >...</svg>

You can also access the optimized SVG icons directly from node_modules/@zerobertoo/r6operators/dist/icons if you desire.

Using via CDN (browser)

Load the minified UMD bundle from jsDelivr or unpkg — no bundler required:

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@zerobertoo/r6operators/dist/r6operators.min.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/@zerobertoo/r6operators/dist/r6operators.min.js"></script>

The library is available as the global r6operators:

<script src="https://cdn.jsdelivr.net/npm/@zerobertoo/r6operators/dist/r6operators.min.js"></script>
<script>
  document.body.innerHTML = r6operators.alibi.toSVG({ width: 64, height: 64 })
</script>

Individual optimized SVG icons are also served directly via CDN:

https://cdn.jsdelivr.net/npm/@zerobertoo/r6operators/dist/icons/alibi.svg
https://unpkg.com/@zerobertoo/r6operators/dist/icons/alibi.svg

React Component

For React applications, use the dedicated @zerobertoo/r6operators-react package:

1. Install

npm install @zerobertoo/r6operators-react

2. Use it

import { R6Operator } from "@zerobertoo/r6operators-react"

function App() {
  return (
    <div>
      <R6Operator name="alibi" size={48} />
      <R6Operator name="ash" size={64} color="red" className="operator-icon" />
    </div>
  )
}

The component accepts the following props:

• name: Operator identifier (e.g. "alibi", "ash", "thermite") - TypeScript autocompletes valid names
• size: Width and height in pixels (default: 24)
• color: Fill color applied to the SVG (default: "currentColor")
• className: Additional CSS class
• All other SVG props are passed through

Reference

r6operators.[name]

An object containing all data about the operator, including the svg contents and attributes.

Note: You can find all possible operator names in the operators/index.ts file

Please keep in mind that the properties bio, meta and ratings are not available on recruits.

r6operators.[name].toSVG([attrs])

Returns an SVG string of the operator icon.

Parameters

| Name | Type | Description | | ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |

r6operators.alibi.toSVG()
// <svg class="r6operators r6operators-alibi" ... >...</svg>

r6operators.alibi.toSVG({ class: "large" })
// <svg class="r6operators r6operators-alibi large" ... >...</svg>

r6operators.alibi.toSVG({ "stroke-width": 2, color: "red" })
// <svg class="r6operators r6operators-alibi" stroke-width="2" color="red" ... >...</svg>

getSVGIcon([op], [attrs])

Returns an SVG string of the operator icon.

Parameters

| Name | Type | Description | | ------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | op | Operator | Operator object | | attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |

import { alibi, getSVGIcon } from "@zerobertoo/r6operators"

getSVGIcon(alibi)
// <svg class="r6operators r6operators-alibi" ... >...</svg>

getSVGIcon(alibi, { class: "large" })
// <svg class="r6operators r6operators-alibi large" ... >...</svg>

Roadmap

Curious about what's coming next? Check out the Roadmap to see planned features — weapons data, maps data, React wrappers, and more.

Contributing

For more info on how to contribute please see the contribution guidelines.

Credits

• @marcopixel for creating the original r6operators project.
• @colebemis for his work on feather, which gave the original project an awesome reference.
• @dtSniper for creating the IQ, Thatcher, Fuze, Glaz, Bandit, Kapkan, Tachanka, Pulse, Sledge and Doc icons.
• @joeyfjj for creating the Goyo, Mute, Smoke, Jäger and Blitz icons.
• @danielwerg for creating the Fenrir, Brava and Solis icons and his awesome price calculator function.
• @LaxisB, @NaughtyMuppet & @danielwerg for general help on this project. <3
• @AlmostSuspense for updating Zofia's information.
• @tyceffe for updating the icons for Dokkaebi and Thatcher.

License

r6operators is licensed under the MIT License.

This project is not affiliated with Ubisoft Entertainment. Tom Clancy's, Rainbow Six, The Soldier Icon, Ubisoft and the Ubisoft logo are trademarks of Ubisoft Entertainment.