Использование селектора атрибутов CSS со стилизованными компонентами для иконок

Question

Я использую NextJS для React, SSR и styled-компонентов (с хэшированием).Пока мне удалось построить основную структуру CSS с помощью Sass.

nextjs.config.js

const withSass = require('@zeit/next-sass')
module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[hash:base64:5]",
  }
})

Проблема в том, что я не могу использовать селектор атрибутов CSS;для значков обычно я определяю семейство шрифтов, как показано ниже:

[class^='icon-'] {
  font-family: 'fonticon'
}
.icon-foo {
  &:before {
    content: '\someunicode';
  }
}

, когда я запускаю сборку, а класс .icon-foo успешно преобразуется в некоторый хэш и соответствует CSS.Но я не могу использовать здесь селектор атрибута.

Я знаю, что невозможно конвертировать этот тип селектора, но есть ли какое-либо решение, например, предоставление правила исключения для cssLoaderOptions, например,

excludeClasses: /^.icon-/

чтобы я мог сохранить свои классы такими, какие они есть только для иконок?

Я знаю, что могу присвоить font-family тегу <i>, но я хочу избежать этого, если это возможно.