generated from allen-cell-animated/github-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 3
Generate a font with svgs
Megan Riel-Mehan edited this page Mar 23, 2022
·
3 revisions
- SVGs need to be only fill:
- open svg in Illustrator
- Select all, go to Open > Expand > Click OK
- make the art board come right to the edges of the object to have standard amount of padding around the image. Make it smaller to add additional padding.
- export svg, click "use artboards"
- Upload to iconmoon app: https://icomoon.io/app/#/select/font
- Download fonts
- Copy fonts/ into src/assets/fonts
- If this is the first time adding this font, copy the @font-face code block from the icon moon style sheet, and then change the relative paths to point to your font files
- Copy new icon style from style.css into src/style.css. Remove color attribute if it's there example:
.icon-focus:before {
content: "\e90a";
}
- Use it in the app: JavaScript:
<span
className={classNames([
"icon-moon",
"anticon",
styles.focus,
])}
/>
style.css:
.focus::after {
content: "\e910";
}