An icon library for runcloud
-related repos
yarn add git+ssh://git@bitbucket.org:runcloud/solar-icon.git
This library expects you to have bundler such as Webpack or Rollup, to build your application. For runcloud-dashboard
or runcloud-agency
, please use runcloudnicon.css
build.
@import '~solar-icon/dist/runcloudnicon.css';
- As both projects are using Webpack, you need to set
{ ... processCssUrls: true }
to let Webpack include the font icon binary into the final build.
import 'solar-icon'
- No further action required if you import through JS.
This library expects you to have bundler such as Webpack or Rollup, to build your application. For solar-ui
, use _runcloudnicon.scss
*
@import '~solar-icon/dist/runcloudnicon';
*_runcloudnicon.scss
is configured to NOT include the font-binary (runcloudnicon.woff2
) but only the unicode - class pairings.
- All icons in
runcloud-
repos are used with the itallic tag<i>
. - Icons are called inside CSS classes. To use an icon, simply add
rc rc-ln-[insert-icon-here]
to theclass
- Icons are treated as text. To change size or color, use text-based CSS classes such as
font-size
,color
. - For a full list of icons, you can preview them here on the browser: runcloudnicon preview
Example:
// eg. Edit button
<a>
<i class="rc rc-ln-pencil"></i>
<span>Edit</span>
</a>
This part is for developing solar-icon
as a package. You can ignore this part if you only need to consume the package.
git clone git@bitbucket.org:runcloud/solar-icon.git
cd solar-ui
yarn install
cd solar-icon
yarn link
cd [another-app]
yarn link solar-icon
You should be able to see solar-icon
inside your node_modules
after running yarn link
yarn link -- Register package to yarn global registry. Must be called from package dir
yarn unlink -- Deregisters package from yarn global registry. Must be called from package dir
yarn unlink <package-name> -- Unlinks package from the local yarn registry
yarn prod -- Builds the package for production.
This library uses fantasticon-cli
to build the icons. Don't worry, you already have it locally if you have run yarn install
yarn prod
You can change the config file inside .fantasticonrc.js
.
This config file contains options to:
-
Icon library name
-
Input dir
-
Output dir
-
Output asset types
-
Icon naming convention
-
Map typings for Typescript autocomplete
To learn more: https://github.com/tancredi/fantasticon
if anything, can ask the devs below:
-
irfanismail
-
nadia
Last updated: 14/03/2022 - irfanismail