Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

edit contents of scss output #448

Open
eendkonijn opened this issue Oct 5, 2022 · 1 comment
Open

edit contents of scss output #448

eendkonijn opened this issue Oct 5, 2022 · 1 comment

Comments

@eendkonijn
Copy link

Hello, thanks for this package, very useful! I have a question/suggestion. At the moment, when I generate an scss file, it outputs a file with a font-face declaration. I would like the output to be just the variable map. Is this possible?

current output:

$trinity-iconfont-font: "trinity-iconfont";

@font-face {
    font-family: $trinity-iconfont-font;
    src: url("./trinity-iconfont.woff?55321795d3354290fd22d5fc0f063eae")
            format("woff"),
        url("./trinity-iconfont.woff2?55321795d3354290fd22d5fc0f063eae")
            format("woff2");
}

i[class^="icon-"]:before,
i[class*=" icon-"]:before {
    font-family: trinity-iconfont !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

$trinity-iconfont-map: (
    "externalLinkIcon": "\f117",
    "checkIcon": "\f103",
    "lineCrossIcon": "\f10a",
    "alertIcon": "\f101",
    "arrowForwardIcon": "\f102",
    "arrowReplyIcon": "\f104",
    "bellIcon": "\f105",
    "boxIcon": "\f106",
    {...etc}

my fantasticonrc:

module.exports = {
    inputDir: "style-dictionary/assets/fonts/iconfont/svg", // (required)
    outputDir: "style-dictionary/assets/fonts/iconfont/", // (required)
    fontTypes: ["woff", "woff2"],
    assetTypes: ["scss", "css", "json"],
    codepoints: {
        externalLinkIcon: 61719,
        checkIcon: 61699,
        lineCrossIcon: 61706,
    },
    pathOptions: {
        scss: "packages/styles/src/variables/_iconfont-tokens.scss",
        woff: "packages/styles/src/variables/trinity-iconfont.woff",
    },
};
@ripetoast
Copy link

I would also like to know the answer to this. The reason being I would like to use a base64 version font-face of the generated font file instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants