Please use this approach instead.
Over the years we have tried several solution to have vector icons in our applications. There are many ways to achieve this, from SVGs inlined into the HTML, SVGs inlined in CSS, JavaScript-based solutions, to icon fonts.
Out of all these options, the tried and true icon font seems to have the most advantages, since
The big issue used to be building the font itself was very cumbersome. Luckily, there are webpack plugins out there, such as iconfont-plugin-webpack Show archive.org snapshot that automate the font building.
If you're still using the Rails asset pipeline, try the half-automatic approach.
yarn add iconfont-plugin-webpack
yarn add resolve-url-loader
Add these lines to your environment.js
:
const IconfontPlugin = require('iconfont-plugin-webpack')
environment.plugins.append(
// https://www.npmjs.com/package/iconfont-plugin-webpack
'Iconfont', new IconfontPlugin({
src: './app/webpack/images/icons',
family: 'icons',
dest: {
font: './tmp/webpack/generated/fonts/icon_font/[family].[type]',
css: './tmp/webpack/generated/_icon_font_[family].scss'
},
watch: {
pattern: 'app/webpack/images/icons/*',
cwd: undefined
},
})
)
// unfortunately, we need to adjust the sass-loader and add an additional `resolve-url-loader`, otherwise
// the relative url(./fonts/...) entries generated by the IconfontPlugin will not work
const sassLoaderConfig = environment.loaders.get('sass')
const sassLoaderIndex = sassLoaderConfig.use.findIndex(config => { return config.loader === 'sass-loader' })
sassLoaderConfig.use[sassLoaderIndex].options.includePaths = ['tmp/webpack']
sassLoaderConfig.use.splice(sassLoaderIndex, 0, {
loader: 'resolve-url-loader',
})
Put all your icons into app/webpack/images/icons/
.
Import the icon-font by adding a file icon_font.sass
:
$icon-prefix: '-'
@import "generated/icon_font_icons"
$size: 1em * $line-height-base // only works with bootstrap
.icon
// adjust some styles
display: inline-block
width: 1em
height: 1em
font-size: $size
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
text-rendering: auto
font-style: normal
font-weight: normal
line-height: 1
// We can not use "vertical-align: middle" to vertically center the font, or icon containers
// cause their surrounding containers to grow. The follow produces the desired result.
vertical-align: text-bottom
margin-bottom: -.1em
Now, in your HTML, you can add an icon with
<i class="icon -name-of-the-icon"></i>
Icon names are simply the file names of the SVGs.
If you want to use icons in Sass, you use the following:
// probably want to do this in a generic _mixins.sass:
$create-font-face: false
$create-icon-classes: false
@import generated/icon_font_icons
.my-element
+iconfont(icon-name)
transform
attribute on a <use>
tag that was seemingly ignored. I was able to fix the affected SVG with my text editor.evenodd
is not supported and can be fixed with the
File Rule plugin in Figma
Show archive.org snapshot
svgicons2svgfont
and `svg2ttf´svgicons2svgfont
online
http://nfroidure.github.io/svgiconfont/
Show archive.org snapshot
by uploading your source SVG