Decorative image frame

D-107

3wly 项目开发组自留地

test
闲言碎语
laravel
swoole
docker
net core
php
问题记录
vue
vmware
新手向

win10 子系统（wsl2）运行laradock 2020-01-16 docker
win10 子系统（wsl1）运行 laradock 2020-01-14 docker
net core WebApi——April.Util更新之权限 2019-11-10 net core
net core WebApi——公用库April.Util公开及发布 2019-11-07 net core
net core WebApi——使用xUnits来实现单元测试 2019-11-05 net core
向net core 3.0进击——多平台项目发布与部署 2019-10-29 net core
在 laravel vue 中使用 svg 图标 2019-10-28 laravel
Linux配置部署_新手向（五）——Docker的安装与使用 2019-10-28 vmware 新手向
又是一年1024 2019-10-24 闲言碎语
net core WebApi——使用NPOI导入导出操作 2019-10-18 net core
在 laradock 环境中使用 laravel-swoole 的 websocket 2019-10-12 laravel swoole docker
向net core 3.0进击——April.WebApi从2.2爬到3.0 2019-10-09 net core
向net core 3.0进击——Swagger的改变 2019-10-07 net core
net core WebApi——定时任务Quartz 2019-09-26 net core
net core WebApi——缓存神器Redis 2019-09-23 net core
Linux配置部署_新手向（四）——Redis安装与配置 2019-09-12 vmware 新手向
Linux配置部署_新手向（三）——MySql安装与配置 2019-09-12 vmware 新手向
Hello Dotnet 2019-09-04 test
Hello PHP 2019-09-03 test
net core WebApi——尝试企业微信来开发企业内部应用 2019-09-02 net core
net core WebApi——文件分片下载 2019-08-27 net core
net core WebApi——文件分片上传与跨域请求处理 2019-08-23 net core
在 laradock 环境中使用 laravel-swoole 加速你的 laravel 应用 2019-08-23 laravel swoole docker
Linux配置部署_新手向（二）——Nginx安装与配置 2019-08-21 vmware 新手向
Linux配置部署_新手向（一）——CentOS系统安装 2019-08-21 vmware 新手向
在vue中使用laravel-permission的@can标签 2019-08-02 laravel vue
net core Webapi基础工程搭建（七）——小试AOP及常规测试_Part 2 2019-08-01 net core
net core Webapi基础工程搭建（七）——小试AOP及常规测试_Part 1 2019-07-30 net core
net core Webapi基础工程搭建（六）——数据库操作_Part 2 2019-07-19 net core
net core Webapi 总目录 2019-07-19 net core
net core Webapi基础工程搭建（六）——数据库操作_Part 1 2019-07-18 net core
tp5文件上传$_FILES有值request中file却为空 2019-07-11 php 问题记录
net core Webapi基础工程搭建（五）——缓存机制 2019-07-10 net core
net core Webapi基础工程搭建（四）——日志功能log4net 2019-07-04 net core
net core Webapi基础工程搭建（三）——在线接口文档Swagger 2019-07-02 net core
net core Webapi基础工程搭建（二）——创建工程 2019-07-02 net core
net core Webapi基础工程搭建（一）——开发工具及环境 2019-07-02 net core
laravel 广播系统学习 2019-04-12 laravel
laravel 队列学习 2019-04-09 laravel
laravel 事件系统学习 2019-04-03 laravel
使用 laravel mix 编译资源 2019-03-15 laravel
Hello World 2018-02-13 test

在 laravel vue 中使用 svg 图标

安装扩展组件：

1
2
3

npm install laravel-mix-svg-vue
or
yarn add laravel-mix-svg-vue

在 webpack.mix.js 中添加引用：

const mix = require('laravel-mix');
require('laravel-mix-svg-vue');

mix.js('resources/js/app.js', 'public/js')
    .svgVue();

在 app.js 中引用组件

import Vue from 'vue';
import SvgVue from 'svg-vue';

Vue.use(SvgVue);

svg 使用：

1	<svg-vue icon="avatar"></svg-vue>

默认配置

{
    svgPath: 'resources/svg',
    extract: false,
    svgoSettings: [
        { removeTitle: true },
        { removeViewBox: false },
        { removeDimensions: true }
    ]
}

参数	类型	默认值	说明
svgPath	String	resources/svg	svg 图标路径
extract	Boolean	false	将 svg 与主包分离
svgoSettings	Array	[{ removeTitle: true }, { removeViewBox: false }, { removeDimensions: true }]	svgo 相关设置

缺点

好像是不能通过参数动态改变 svg 内容，没试出来，不知道什么原因。