Gathering detailed insights and metrics for vue-svg-component
Transform svg to vue component, Suitable for vite and webpack.
Installations
npm install vue-svg-componentDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.14.2
NPM Version
9.5.0
Score
52.1
Supply Chain
98.1
Quality
75.4
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
gonghongchen
Download Statistics
Total Downloads
1,180
Last Day
1
Last Week
3
Last Month
72
Last Year
675
GitHub Statistics
MIT License
1 Stars
2 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Jun 12, 2023
Maintainers
1
Package Meta Information
Latest Version
1.2.3
Package Id
vue-svg-component@1.2.3
Unpacked Size
14.23 kB
Size
5.77 kB
File Count
8
NPM Version
9.5.0
Node Version
18.14.2
Published on
Jun 12, 2023
Total Downloads
Cumulative downloads
Total Downloads
1,180
Last Day
0%
1
Compared to previous day
Last Week
-84.2%
3
Compared to previous week
Last Month
-31.4%
72
Compared to previous month
Last Year
33.7%
675
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
vue-svg-component
Transform svg to vue component, Suitable for vite and webpack.
中文文档请查看README_CN.md
The functional points included are as follows:
- Use svg file as vue component.
- During the conversion process, the existing fixed color values in the SVG file will be filled and converted to currentColor, making it easier to use CSS to set the color (if your project does not want this processing, then there is actually no need to use the SVG file in the form of Vue components. It should be more reasonable to use IMG directly).
- During the conversion process, the use of
svgowill be optimized to compress and eliminate redundant information in the source code of SVG. - Without any additional configuration processing, the introduction of all SVGs within the project will be transformed. If you only want to process a certain part of the SVGs, you can achieve it by customizing the configuration identifier. Please refer to the following description for specific configurations.
Installation
1# npm 2npm i vue-svg-component -D
Usage examples
First, import file:
1import HomeIcon from '@/assets/home.svg' 2// Alternatively, by adding query parameters such as com, it can be identified that only the introduction of this type of SVG file will be converted into a component 3import HomeIcon from '@/assets/home.svg?com'
Then use it this way:
1<HomeIcon style="color: red" /> 2<!-- or --> 3<component :is="HomeIcon" class="svg-icon" />
As for how to set colors for icons, two situations need to be distinguished to handle:
- If the icon itself is a monochromatic SVG file, you only need to set the color attribute;
- If the icon itself is a multi-color SVG file, setting the color value directly in the outer layer is not sufficient. Different color values need to be set for different nodes in the SVG file to achieve a multi-color effect. For example, different colors can be set for nodes such as rect and path inside the icon:
1.svg-icon { 2 rect { 3 color: red; 4 } 5 path { 6 color: black; 7 } 8}
Vite environment configuration
Configure in vite.config.js:
1import svgToComponent from 'vue-svg-component'
2
3export default defineConfig({
4 plugins: [svgToComponent({
5 query: 'com', // Only match processing .svg?com，such as：import HomeIcon from '@/assets/home.svg?com'
6 })],
7})For the vue-svg-component in the Vite environment, it can be identified by passing in the parameter query as a specific string that only such svg will be converted into a vue component. If the parameter is empty, all svgs will be converted by default.
Webpack environment configuration
Configure in vue.config.js：
1configureWebpack: { 2 module: { 3 rules: [ 4 { 5 test: /\.svg$/, 6 // Convert all SVGs: 7 // loader: 'vue-svg-component/webpack', 8 // Convert specific SVGs: 9 oneOf: [ 10 { 11 resourceQuery: /com/, // Only match processing .svg?com，such as：import HomeIcon from '@/assets/home.svg?com' 12 use: 'vue-svg-component/webpack', 13 }, 14 ], 15 }, 16 ], 17 }, 18}, 19// or 20chainWebpack(config) { 21 config.module 22 .rule('svg-loader') 23 .test(/\.svg$/) // Process all 24 // .test(/\.svg\?com$/) // only .svg?com 25 .use('vue-svg-component/webpack') 26 .loader('vue-svg-component/webpack') 27 .end() 28},
The above configuration is different from using the input parameter query to process svg files of a specified type in the Vite environment. In the Webpack environment, you can directly use the oneOf configuration or customize the regular expression of test to achieve this.
It should be noted that if there are any unclear additional rules for SVG configuration within the project that result in importing SVG files with results that are not just component content but other results, webpack can provide an inline method to enforce the use of only vue-svg-component for processing:
1import Icon from '!!vue-svg-component/webpack!./assets/icon.svg'
You can also achieve this by modifying the suffix of the SVG file to another specific file format, such as changing it to .svgcom to indicate that this is an SVG file that will be processed as a component during import, but this approach is obviously not elegant enough.
In addition, you can use the command:
1vue inspect > webpack.config.js
To output the complete webpack configuration information in the project, check the specific processing rules for SVG files that already exist, and then take corresponding measures accordingly. For example, the Vue project created through VueCLI will have this processing rule configured by default:
1/* config.module.rule('svg') */ 2{ 3 test: /\.(svg)(\?.*)?$/, 4 type: 'asset/resource', 5 generator: { 6 filename: 'img/[name].[hash:8][ext]' 7 } 8},
This will always result in a file path when importing an SVG file. Then, you can delete this rule by configuring it as follows:
1chainWebpack(config) { 2 config.module.rules.delete('svg') 3},
No vulnerabilities found.
No security vulnerabilities found.