
Security News
New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
svg-to-vue-component
Advanced tools
When you import the .svg
file as a Vue component instead of using the URL to the file, you can style it with CSS and add addtional DOM properties or event handlers to the component directly.
The differences between this project and vue-svg-loader are:
vue-loader
.class
and style
attributes on the generated component while we support all DOM props and events.yarn add svg-to-vue-component --dev
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
// If you want to import svg in css files
// You need to configure another rule to use file-loader for that
issuer: /\.(vue|js|ts|svg)$/,
use: [
// This loader compiles .svg file to .vue file
// So we use `vue-loader` after it
'vue-loader',
'svg-to-vue-component/loader'
]
}
]
}
// ...other configurations
}
Then you can import .svg
files directly and use them as Vue components:
<template>
<!-- Dom props and events are all available here -->
<CheckIcon width="20px" height="20px" @click="handleClick" />
</template>
<script>
import CheckIcon from './check-icon.svg'
export default {
components: {
CheckIcon
},
methods: {
handleClick() {
console.log('It works!')
}
}
}
</script>
In your vue.config.js
:
module.exports = {
chainWebpack(config) {
// Only convert .svg files that are imported by these files as Vue component
const FILE_RE = /\.(vue|js|ts|svg)$/
// Use vue-cli's default rule for svg in non .vue .js .ts files
config.module.rule('svg').issuer(file => !FILE_RE.test(file))
// Use our loader to handle svg imported by other files
config.module
.rule('svg-component')
.test(/\.svg$/)
.issuer(file => FILE_RE.test(file))
.use('vue')
.loader('vue-loader')
.end()
.use('svg-to-vue-component')
.loader('svg-to-vue-component/loader')
}
}
In your poi.config.js
:
module.exports = {
plugins: ['svg-to-vue-component/poi'],
// Or with options for the webpack loader
plugins: [
{
resolve: 'svg-to-vue-component/nuxt',
options: {}
}
]
}
In your nuxt.config.js
:
module.exports = {
modules: ['svg-to-vue-component/nuxt'],
// Or with options for the webpack loader
modules: [
['svg-to-vue-component/nuxt',
{
// ...
}
]
]
}
Pass loader options like this:
// ...
{
test: /\.svg$/,
use: [
'vue-loader',
{
loader: 'svg-to-vue-component/loader',
options: {
// ...Your options here
}
}
]
}
Option | Description |
---|---|
svgoConfig | Project-wise configuration for SVGO, if you want file-relative configuration, use the config file instead, supported format: .svgo.{yml,js,json} , see here for an example file. If you want to turn off SVGO entirely, pass false here. |
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
svg-to-vue-component © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
Website · GitHub @EGOIST · Twitter @_egoistlily
FAQs
Compile SVG files to Vue SFC.
The npm package svg-to-vue-component receives a total of 3,025 weekly downloads. As such, svg-to-vue-component popularity was classified as popular.
We found that svg-to-vue-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.