Skip to content

Generate a font with svgs

Megan Riel-Mehan edited this page Mar 23, 2022 · 3 revisions
  1. 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"
  2. Upload to iconmoon app: https://icomoon.io/app/#/select/font
  3. Download fonts
  4. Copy fonts/ into src/assets/fonts
  5. 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
  6. Copy new icon style from style.css into src/style.css. Remove color attribute if it's there example:
 .icon-focus:before {
  content: "\e90a";
}
  1. Use it in the app: JavaScript:
    <span
       className={classNames([
                  "icon-moon",
                  "anticon",
                   styles.focus,
                            ])}
    />

style.css:

.focus::after {
    content: "\e910";
}
Clone this wiki locally