How to import a string from a file using SASS?

Question

Example: I want to import SVG from a file (to hard-code it in the CSS), e.g.

$svg-icon: @import('./icon.svg');

Is this possible at all using SASS?

Answer 1

Sounds like you want to create an icon font from an svg file. Follow the following steps:

1. Go to https://icomoon.io/app/#/select
2. Click Import icons on the top left
3. Navigate to the svg file you want to create an icon from. select it and click open
4. You should see your icon on the iconmoon web page. Click on it
5. Click generate font on the bottom right
6. You should see your icon on the new page. Hover on it
7. Click get code
8. The code should look something like this

.icon-home2:before {
    content: "\e900";
}

8.1 Copy the code and paste it at the top of your scss or css file.

9. Click the download button on the bottom right.

10. In the new zip folder, go to fonts folder and copy paste eot, svg, ttf and woff files to a some location within your application.

11. Write the following code at the top of your SCSS file (above the code you copy pasted previously)

@font-face {
    font-family: 'newFont';
    src:url('<location of your eot file>');
    src:url('<location of your eot file>?#iefix') format('embedded-opentype'),
        url('<location of your woff file>') format('woff'),
        url('<location of your ttf file>') format('truetype'),
        url('<location of your svg file>') format('svg');
    font-weight: normal;
    font-style: normal;
}

12. Assign the new styling to your dom node (in this case a node with class icon-home2)

13. You final scss(or css) should look something like this.

@font-face {
    font-family: 'newFont';
    src:url('<location of your eot file>');
    src:url('<location of your eot file>?#iefix') format('embedded-opentype'),
        url('<location of your woff file>') format('woff'),
        url('<location of your ttf file>') format('truetype'),
        url('<location of your svg file>') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon-home2:before {
    content: "\e900";
    font-family: "newFont";
    font-size: 20px;
    color: #f47920;
}