This article takes you through the use of svg icons!
Article directory
foreword
SVG is one of the commonly used icon formats in modern web design
We are engaged in the front end, and we must have something to do with icons, so how to use icons quickly and conveniently has become our trouble! The next use of SVG hopes to help you!
1. The advantages of SVG compared to font icons
1. Scalability : SVG is a vector- based graphics format that can be losslessly scaled to any size without distortion . This allows SVG icons to look good on screens of different sizes, whereas font icons may appear jagged or distorted when scaled up.
2. Vector editing : SVG icons can be directly modified and edited in vector editing software, while font icons need to regenerate font files to be modified. This makes SVG icons more flexible and customizable .
3. Animation effects : SVG icons can add animation effects through CSS or JavaScript, such as rotation, gradient, scaling, etc. Font icons, on the other hand, can usually only be animated simply by changing the font size or color.
4. Good compatibility : SVG icons can be used in all modern browsers, including mobile devices and desktop devices, while font icons may not be supported or displayed abnormally on some old browsers.
5. Can be directly embedded : SVG icons can be directly embedded in HTML, while font icons need to import font files and use specific CSS styles to display. This makes SVG icons more convenient and easy to use.
6. Small file size : SVG icons are smaller in size because they are descriptions based on mathematical formulas rather than pixel-based images. This makes SVG icons load faster on the web and reduces bandwidth usage.
There are so many advantages, come and learn how to use it!
2. Use steps
1. Create a new vue2 project
vue create svg-icon
2. Install project dependencies
npm i svg-sprite-loader@4.1.3
When packaging here later, many errors may be reported, such as: Error Cannot find module 'webpacklibRuleSet'
If this error is reported, reinstall webpack
npm i webpack@4.29.5 --force
3. Create a new folder in the src directory
Create two new folders under src, one icons, one utils, and the svg under the icons folder is used to store SVG icons. The
src/icons/index.js code is as follows:
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
The src/utils/validate.js code is as follows:
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean} Boolean
*/
export function validMobile(str) {
return /^1[3-9][0-9]{9}$/.test(str)
}
4. Create the svg-icon component
Under the components folder, create a new SvgIcon
components/SvgIcon/index.vue code as follows:
<template>
<div class="hello">
<svg-icon icon-class="people" />
<h1>{
{
msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
5. Introduce index.js under icons in main.js
import Vue from 'vue'
import App from './App.vue'
// 引入
import '@/icons'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
6. Configure vue.config.js
const {
defineConfig } = require('@vue/cli-service')
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack (config) {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
})
7. After the steps are completed, check the results
Add a sentence in HelloWorld.vue <svg-icon icon-class="people" />, people is the name of the svg icon stored in the src/icons/svg folder ( people.svg ) The code of
people.svg :
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M104.185 95.254c8.161 7.574 13.145 17.441 13.145 28.28 0 1.508-.098 2.998-.285 4.466h-10.784c.238-1.465.403-2.948.403-4.465 0-8.983-4.36-17.115-11.419-23.216C86 104.66 75.355 107.162 64 107.162c-11.344 0-21.98-2.495-31.22-6.83-7.064 6.099-11.444 14.218-11.444 23.203 0 1.517.165 3 .403 4.465H10.955a35.444 35.444 0 0 1-.285-4.465c0-10.838 4.974-20.713 13.127-28.291C9.294 85.42.003 70.417.003 53.58.003 23.99 28.656.001 64 .001s63.997 23.988 63.997 53.58c0 16.842-9.299 31.85-23.812 41.673zM64 36.867c-29.454 0-53.33-10.077-53.33 15.342 0 25.418 23.876 46.023 53.33 46.023 29.454 0 53.33-20.605 53.33-46.023 0-25.419-23.876-15.342-53.33-15.342zm24.888 25.644c-3.927 0-7.111-2.665-7.111-5.953 0-3.288 3.184-5.954 7.11-5.954 3.928 0 7.111 2.666 7.111 5.954s-3.183 5.953-7.11 5.953zm-3.556 16.372c0 4.11-9.55 7.442-21.332 7.442-11.781 0-21.332-3.332-21.332-7.442 0-1.06.656-2.064 1.8-2.976 3.295 2.626 10.79 4.465 19.532 4.465 8.743 0 16.237-1.84 19.531-4.465 1.145.912 1.801 1.916 1.801 2.976zm-46.22-16.372c-3.927 0-7.11-2.665-7.11-5.953 0-3.288 3.183-5.954 7.11-5.954 3.927 0 7.111 2.666 7.111 5.954s-3.184 5.953-7.11 5.953z"/></svg>
Run the project, and people.svg will be displayed.
By the way, you can collect the SVG icon codes that you usually encounter. Maybe it will come in handy someday. I recommend a place: iconfont Alibaba vector icon library.
Summarize
There are so many advantages of SVG icons, mainly they are convenient to use! It's better to take action than to move!