ods-icon

Semantic vector graphics. React and Vue libraries.

React

First, install ods-icon from npm:

npm install ods-icon

Now each icon can be imported individually as a React component:

import { AcademicCapIcon } from 'ods-icon/react/24/outline'

function MyComponent() {
  return (
    <div>
      <AcademicCapIcon className="colorPrimary" />
      <p>...</p>
    </div>
  )
}

You can import the 24x24 outline icons from ods-icon/react/24/outline, and the 24x24 solid icons from ods-icon/react/24/solid.

The icons follow an upper camel case naming convention and always have the word Icon as a suffix.

Vue

First, install ods-icon from npm:

npm install ods-icon

Each icon can be imported individually as a Vue component:

<template>
  <div>
    <AcademicCapIcon class="colorPrimary" />
    <p>...</p>
  </div>
</template>

<script setup>
import { AcademicCapIcon } from '@ods-icon/vue/24/solid'
</script>

You can import the 24x24 outline icons from ods-icon/vue/24/outline, and the 24x24 solid icons from ods-icon/vue/24/solid.

The icons follow an upper camel case naming convention and always have the word Icon as a suffix.

License

This library is MIT licensed.