Подключение и использование svg иконок в css?

Question

[to_east]

Всем привет!
Вопрос по сабжу, если конкретнее как объявлять классы стилей ссылаясь на svg файл:

@font-face {
    font-family: "Font Custom";
    font-style: normal;
    font-weight: 900;
    src: url("/static/fonts/font-custom.svg") format("svg");
}

.foobar {
    font-family: "Font Custom";
}

Каким образом подключить ту или иную фигуру из svg файла к классу foobar?
В файле svg присутствует тег glyph с аттрибутом glyph-name="align-center", например, возможно ли ссылатся на это имя?

Comments

[Rustam Bainazarov]

Зачем вам шрифт в SVG-формате? Его поддержка браузерами что-то типа нулевой:
https://caniuse.com/#feat=svg-fonts

Посмотрите, как работают типичные шрифтовые иконки, к примеру, те же иконки FontAwesome.

Другой подход — подключайте их через SVG-спрайт и используйте через #use.

[Максим]

SmthTo, разве fontawesome подключается через use ?

[Rustam Bainazarov]

Максим Ленский, нет, я имел в виду, посмотреть, как работают типичные шрифтовые иконки. Первый метод. Дополнил комментарий, чтобы не было недопонимания, спасибо :))

Answer 1

[to_east]

Все до меня дошло, проблема была в том что я не упомянул что собиралось все это дело на вебпаке, до этого использовал raw-loader для svg, короче это правило решило мою проблему:

module: {
        rules: [
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',
                        publicPath: 'static/fonts/'
                    }
                }]
            },
        ]