https://github.com/continuous-foundation/scienceicons
Open science SVG icons, by Continuous Science Foundation.
https://github.com/continuous-foundation/scienceicons
Last synced: 12 months ago
JSON representation
Open science SVG icons, by Continuous Science Foundation.
- Host: GitHub
- URL: https://github.com/continuous-foundation/scienceicons
- Owner: continuous-foundation
- License: mit
- Created: 2023-01-07T06:45:25.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-25T17:08:26.000Z (about 1 year ago)
- Last Synced: 2025-06-17T03:05:06.955Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 462 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Open science SVG icons, by Continuous Science Foundation.
Available as basic SVG icons and via first-party React and Vue libraries.
## React
First, install `@scienceicons/react` from npm:
```sh
npm install @scienceicons/react
```
Now each icon can be imported individually as a React component:
```js
import { OpenAccessIcon } from '@scienceicons/react/24/solid';
function MyComponent() {
return (
...
);
}
```
The 24x24 outline icons can be imported from `@scienceicons/react/24/outline`, the 24x24 solid icons can be imported from `@scienceicons/react/24/solid`, and the 20x20 solid icons can be imported from `@scienceicons/react/20/solid`.
Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.
[Browse the full list of icon names on UNPKG →](https://unpkg.com/browse/@scienceicons/react/24/solid/)
## Vue
_Note that this library currently only supports Vue 3._
First, install `@scienceicons/vue` from npm:
```sh
npm install @scienceicons/vue
```
Now each icon can be imported individually as a Vue component:
```vue
...
import { OpenAccessIcon } from '@scienceicons/vue/24/solid';
export default {
components: { OpenAccessIcon },
};
```
The 24x24 outline icons can be imported from `@scienceicons/vue/24/outline`, the 24x24 solid icons can be imported from `@scienceicons/vue/24/solid`, and the 20x20 solid icons can be imported from `@scienceicons/vue/20/solid`.
Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.
[Browse the full list of icon names on UNPKG →](https://unpkg.com/browse/@scienceicons/vue/24/solid/)
# Typst
```typst
#import "@preview/scienceicons:0.1.0": open-access-icon
This article is Open Access #open-access-icon(color: orange, height: 1.1em, baseline: 20%)
```
All icons:
[See more](https://typst.app/universe/package/scienceicons/)
# MyST Markdown
A MyST Markdown role for science icons and an accompanying react based renderer
## Installation
Copy the file `scienceicons.mjs` from `dist/` intoyour local `mystmd` project and add it to the list of plugins in `myst.yml`:
```yaml
project:
plugins:
- scienceicons.mjs
```
## Using the Role
To use the role simply add it to your MyST markdown like so:
```markdown
Praesent mattis viverra lacus, {scienceicon}`twitter` at cursus eros hendrerit nec {scienceicon}`curvenote`.
```
And the relevant icons will appear inline in your text. Use the icons in links by:
```markdown
... metus ut consequat [{scienceicon}`twitter`](https://x.com/@curvenote) dignissim ante sem ...
```
[Browse the full list of icon names on UNPKG →](https://unpkg.com/browse/@scienceicons/myst@latest/src/names.json)
> [!TIP]
> MyST Markdown's plugin loading system is still developing, [look out for updates](https://mystmd.org/guide/plugins) on easier ways to access and load plugins.
## Using the renderer
Methods for installing a bundled renderer are still in development by the MyST Markdown project and Curvenote. In the meantime you can install this package from git (`git+https://github.com//.git#`) and include in your build.
## License
This library is primarily based on [heroicons](https://www.npmjs.com/package/heroicons), see [MIT license](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE). For other cases, license and attribution information can be found in comments within individual `.svg` files.
## License
This library is MIT licensed.