• 售前

  • 售后

热门帖子
入门百科

Vue中引入svg图标的两种方式

[复制链接]
胖胖龙龙灯 显示全部楼层 发表于 2021-10-25 19:13:39 |阅读模式 打印 上一主题 下一主题
Vue中引入svg图标的方式
Vue中引入svg图标的方式一

安装
  1. yarn add svg-sprite-loader --dev
复制代码
svg组件

index.vue
  1. <!-- svg组件 -->
  2. <template>
  3. <svg class="svg-icon" :class="svgClass" aria-hidden="true">
  4.   <use :xlink:href="iconName" />
  5. </svg>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'SvgIcon',
  10. props: {
  11.   // svg 的名称
  12.   svgName: {
  13.    type: String,
  14.    required: true
  15.   }
  16. },
  17. computed: {
  18.   iconName () {
  19.    return `#icon-${this.svgName}`
  20.   },
  21.   svgClass () {
  22.    if (this.svgName) {
  23.     return 'svg-icon' + this.svgName
  24.    } else {
  25.     return 'svg-icon'
  26.    }
  27.   }
  28. }
  29. }
  30. </script>
  31. <style lang="less" scoped>
  32. .svg-icon {
  33. width: 100px;
  34. height: 100px;
  35. vertical-align: -0.15em;
  36. fill: currentColor;
  37. overflow: hidden;
  38. }
  39. </style>
复制代码
注册到全局

index.js
  1. import Vue from 'vue'
  2. import SvgIcon from '@/components/SvgIcon'
  3. // 注册到全局
  4. Vue.component('svg-icon', SvgIcon)
  5. const requireAll = requireContext => requireContext.keys().map(requireContext)
  6. const req = require.context('./svg', false, /\.svg$/)
  7. requireAll(req)
复制代码
vue.config.js
  1. module.exports = {
  2.         chainWebpack: config => {
  3.                  config.module
  4.    .rule('svg')
  5.    .exclude.add(resolve('src/assets/icons'))
  6.    .end()
  7.   config.module
  8.    .rule('icons')
  9.    .test(/\.svg$/)
  10.    .include.add(resolve('src/assets/icons'))
  11.    .end()
  12.    .use('svg-sprite-loader')
  13.    .loader('svg-sprite-loader')
  14.    .options({
  15.     symbolId: 'icon-[name]'
  16.    })
  17.    .end()
  18.         }  
  19. }
复制代码
页面中使用
  1. <!-- svg-name为svg名 -->
  2. <svg-icon svg-name="ic_home_news" />
复制代码
Vue中引入svg图标的方式二

npm install svg-sprite-loader --save-dev
vue.config.js中添加如下代码
  1. const path = require('path');
  2. function resolve(dir) {
  3. // __dirname项目根目录的绝对路径
  4. return path.join(__dirname, dir);
  5. }
  6. module.exports = {
  7. chainWebpack: config => {
  8. const svgRule = config.module.rule('svg');
  9. // 清除已有的所有loader
  10. // 如果你不这样做,接下来的loader会附加在该规则现有的loader之后
  11. svgRule.uses.clear();
  12. svgRule
  13.   .test(/\.svg$/)
  14.   .include.add(path.resolve(__dirname, './src/icons/svg'))
  15.   .end()
  16.   .use('svg-sprite-loader')
  17.   .loader('svg-sprite-loader')
  18.   .options({
  19.   symbolId: 'icon-[name]'
  20.   });
  21. const fileRule = config.module.rule('file');
  22. fileRule.uses.clear();
  23. fileRule
  24.   .test(/\.svg$/)
  25.   .exclude.add(path.resolve(__dirname, './src/icons/svg'))
  26.   .end()
  27.   .use('file-loader')
  28.   .loader('file-loader');
  29. },
  30. }
复制代码
创建如下的文件目录

SvgIcon.vue代码
  1. <template>
  2. <svg :class="svgClass" xmlns="http://www.w3.org/2000/svg">
  3. <use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" />
  4. </svg>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'SvgIcon',
  9. props: {
  10. iconClass: {
  11.   type: String,
  12.   required: true
  13. },
  14. className: {
  15.   type: String,
  16.   default: ''
  17. }
  18. },
  19. computed: {
  20. iconName() {
  21.   return `#icon-${this.iconClass}`;
  22. },
  23. svgClass() {
  24.   if (this.className) {
  25.   return 'svg-icon ' + this.className;
  26.   } else {
  27.   return 'svg-icon';
  28.   }
  29. }
  30. }
  31. };
  32. </script>
  33. <style scoped>
  34. .svg-icon {
  35. width: 1em;
  36. height: 1em;
  37. vertical-align: -0.15em;
  38. fill: currentColor;
  39. overflow: hidden;
  40. }
  41. </style>
复制代码
svg文件夹下放svg图标
index.js代码
  1. import Vue from 'vue';
  2. import SvgIcon from '@/components/SvgIcon'; // svg组件
  3. // register globally
  4. Vue.component('svg-icon', SvgIcon);
  5. const req = require.context('./svg', false, /\.svg$/);
  6. const requireAll = requireContext => requireContext.keys().map(requireContext);
  7. requireAll(req);
复制代码
最后在main.js中引入
  1. import './icons';
复制代码
在页面中使用svg
  1. icon-class是svg图标名 class-name是你要自定义的class类名
复制代码
  1. <svg-icon icon-class="features_ic_risk@1x" class-name="icon"></svg-icon>
复制代码
总结

到此这篇关于Vue中引入svg图标的两种方式的文章就先容到这了,更多相干Vue引入svg图标内容请搜索草根技术分享从前的文章或继续欣赏下面的相干文章希望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作