progress on inline svg with svgo
This commit is contained in:
parent
7325162871
commit
ac64cafac7
|
|
@ -7,12 +7,12 @@ import '../css/app.scss'
|
|||
import "../raw/rdnyc-logo.svg"; // rdnyc logo
|
||||
// other:
|
||||
import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
|
||||
// import "../../node_modules/@mdi/svg/svg/home.svg";
|
||||
import "../../node_modules/@mdi/svg/svg/home.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/information.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/account.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/briefcase-account.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/zip-disk.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/typewriter.svg";
|
||||
import "../../node_modules/@mdi/svg/svg/zip-disk.svg";
|
||||
import "../../node_modules/@mdi/svg/svg/typewriter.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/rss.svg";
|
||||
|
|
|
|||
|
|
@ -25,15 +25,15 @@ namespace WP_RDNYC;
|
|||
|
||||
<div class="post-date font-monospace text-gray-300 <?php echo (has_tag() ? '' : 'mb-3'); ?>">
|
||||
<?php
|
||||
echo svg_icon_use("mdi-calendar-clock", "baseline me-2") . get_the_date('F j, Y');
|
||||
echo ' by ' . svg_icon_use("mdi-account", "baseline me-1") . get_the_author();
|
||||
// echo svg_icon_use("mdi-calendar-clock", "baseline me-2") . get_the_date('F j, Y');
|
||||
// echo ' by ' . svg_icon_use("mdi-account", "baseline me-1") . get_the_author();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if (has_tag()) {
|
||||
echo '<div class="post-tags fs-smaller mb-4">';
|
||||
echo svg_icon_use("mdi-tag-multiple", "baseline text-gray-300 me-1");
|
||||
// echo svg_icon_use("mdi-tag-multiple", "baseline text-gray-300 me-1");
|
||||
|
||||
$tag_strings = array_map(function ($tag) {
|
||||
return '<span class="text-gray-300">#</span><a href="' . get_tag_link($tag) . '">' . $tag->name . '</a>';
|
||||
|
|
|
|||
|
|
@ -3,18 +3,35 @@
|
|||
/**
|
||||
* Function to support inline SVG icons by name with div wrapper
|
||||
*/
|
||||
function svg_icon_use($icon_name, $div_class = '') {
|
||||
$div_class .= ' icon';
|
||||
$output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
|
||||
$output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
|
||||
return $output . "</svg></div>";
|
||||
};
|
||||
// function svg_icon_use($icon_name, $div_class = '') {
|
||||
// $div_class .= ' icon';
|
||||
// $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
|
||||
// $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
|
||||
// return $output . "</svg></div>";
|
||||
// };
|
||||
|
||||
function svg_logo_use($icon_name, $div_class = '', $svg_title = 'Logo') {
|
||||
$div_class .= ' logo';
|
||||
$output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" role=\"img\"><title>$svg_title</title>";
|
||||
$output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
|
||||
return $output . "</svg></div>";
|
||||
// function svg_logo_use($icon_name, $div_class = '', $svg_title = 'Logo') {
|
||||
// $div_class .= ' logo';
|
||||
// $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" role=\"img\"><title>$svg_title</title>";
|
||||
// $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
|
||||
// return $output . "</svg></div>";
|
||||
// };
|
||||
|
||||
function inline_svg(
|
||||
$svg_name,
|
||||
$div_class = 'icon',
|
||||
$svg_class = '',
|
||||
$svg_title = '',
|
||||
$svg_role_img = false,
|
||||
$svg_aria_hidden = true) {
|
||||
$svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );
|
||||
$to_replace = $svg_class == '' ? 'class="{{class-name}}"' : '{{class-name}}';
|
||||
$svg_content = str_replace($to_replace, $svg_class, $svg_content);
|
||||
$svg_content = $svg_role_img ? str_replace('<svg ', '<svg role="img" ', $svg_content) : $svg_content;
|
||||
$svg_content = $svg_aria_hidden ? str_replace('<svg ', '<svg aria-hidden="true" ', $svg_content) : $svg_content;
|
||||
$svg_title = $svg_title == '' ? '' : '<title>' . $svg_title . '</title>';
|
||||
$svg_content = substr_replace($svg_content, $svg_title, strpos($svg_content,'>') + 1, 0);
|
||||
return '<div class="' . $div_class . '">' . $svg_content . '</div>';
|
||||
};
|
||||
|
||||
?>
|
||||
|
|
@ -1,42 +1,42 @@
|
|||
<?php
|
||||
|
||||
require_once( WP_RDNYC_DIR . '/socials.php' );
|
||||
// require_once( WP_RDNYC_DIR . '/socials.php' );
|
||||
|
||||
/**
|
||||
* Shortcode to insert line of social icons
|
||||
*/
|
||||
function social_icons_function( $atts = array() ) {
|
||||
// set up default parameter
|
||||
extract(shortcode_atts(array(
|
||||
'prof' => '0'
|
||||
), $atts));
|
||||
// /**
|
||||
// * Shortcode to insert line of social icons
|
||||
// */
|
||||
// function social_icons_function( $atts = array() ) {
|
||||
// // set up default parameter
|
||||
// extract(shortcode_atts(array(
|
||||
// 'prof' => '0'
|
||||
// ), $atts));
|
||||
|
||||
if ($prof == '1') {
|
||||
return get_social_icons_prof_str();
|
||||
} else {
|
||||
return get_social_icons_str();
|
||||
}
|
||||
}
|
||||
add_shortcode('social_icons', 'social_icons_function');
|
||||
// if ($prof == '1') {
|
||||
// return get_social_icons_prof_str();
|
||||
// } else {
|
||||
// return get_social_icons_str();
|
||||
// }
|
||||
// }
|
||||
// add_shortcode('social_icons', 'social_icons_function');
|
||||
|
||||
/**
|
||||
* Shortcode to insert single social icon by name
|
||||
* However, social icon MUST be imported in main.js !
|
||||
*/
|
||||
function single_social_icon_function( $atts = array() ) {
|
||||
// set up default parameter
|
||||
extract(shortcode_atts(array(
|
||||
'name' => '0',
|
||||
'class' => 'baseline'
|
||||
), $atts));
|
||||
// /**
|
||||
// * Shortcode to insert single social icon by name
|
||||
// * However, social icon MUST be imported in main.js !
|
||||
// */
|
||||
// function single_social_icon_function( $atts = array() ) {
|
||||
// // set up default parameter
|
||||
// extract(shortcode_atts(array(
|
||||
// 'name' => '0',
|
||||
// 'class' => 'baseline'
|
||||
// ), $atts));
|
||||
|
||||
if ($name == '0') {
|
||||
return 'social_icon shortcode requires "name" parameter, like "name=mdi-account"';
|
||||
} else {
|
||||
return svg_icon_use($name, $class);
|
||||
}
|
||||
}
|
||||
add_shortcode('social_icon', 'single_social_icon_function');
|
||||
// if ($name == '0') {
|
||||
// return 'social_icon shortcode requires "name" parameter, like "name=mdi-account"';
|
||||
// } else {
|
||||
// return svg_icon_use($name, $class);
|
||||
// }
|
||||
// }
|
||||
// add_shortcode('social_icon', 'single_social_icon_function');
|
||||
|
||||
|
||||
?>
|
||||
|
|
@ -51,7 +51,11 @@ namespace WP_RDNYC;
|
|||
// printf( '<span class="font-handbrush">%1$s</span>',
|
||||
// esc_html( get_bloginfo( 'name' ) )
|
||||
// );
|
||||
echo svg_logo_use("rdnyc-logo", "", "Recovery Dharma New York City");
|
||||
// echo svg_logo_use("rdnyc-logo", "", "Recovery Dharma New York City");
|
||||
echo inline_svg( 'svg-rdnyc-logo', 'logo', '', 'Recovery Dharma New York City', true, false );
|
||||
// echo '<div class="logo">' . file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' ) . '</div>';
|
||||
// echo str_replace("{{class-name}}", 'logo',
|
||||
// file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' ));
|
||||
|
||||
echo "</a>";
|
||||
?>
|
||||
|
|
|
|||
3677
package-lock.json
generated
3677
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -39,7 +39,7 @@
|
|||
"purgecss-webpack-plugin": "^4.x",
|
||||
"sass": "^1.x",
|
||||
"sass-loader": "^12.x",
|
||||
"svg-sprite-loader": "^6.x",
|
||||
"svgo-loader": "^3.0.0",
|
||||
"webpack": "^5.x",
|
||||
"webpack-cli": "^4.x"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
<?php
|
||||
/**
|
||||
* The 73k theme
|
||||
*
|
||||
* @author Recovery Dharma NYC
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
namespace WP_RDNYC;
|
||||
|
||||
get_header(); ?>
|
||||
<main class="container d-flex justify-content-center">
|
||||
<div class="col-12 col-md-9 col-lg-8 col-xl-7 col-xxl-6 border-bottom border-gray pb-4 mb-3" id="tek-page-resume">
|
||||
|
||||
<?php
|
||||
if ( have_posts() ) {
|
||||
while ( have_posts() ) {
|
||||
the_post(); ?>
|
||||
|
||||
<article itemscope itemtype="https://schema.org/CreativeWork">
|
||||
|
||||
<header>
|
||||
<h2>
|
||||
<?php
|
||||
echo svg_icon_use('mdi-account', 'baseline');
|
||||
echo ' ' . get_the_author_meta('display_name');
|
||||
?>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<div class="article">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<?php
|
||||
}
|
||||
} ?>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<?php
|
||||
get_footer();
|
||||
|
|
@ -21,7 +21,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
|
|||
<label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search…', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
|
||||
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog…" />
|
||||
<button type="submit" class="btn btn-outline-light" title="Search">
|
||||
<?php echo svg_icon_use('mdi-magnify', 'baseline'); ?>
|
||||
<?php echo inline_svg('mdi-magnify', 'icon baseline') ?>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
160
socials.php
160
socials.php
|
|
@ -4,91 +4,91 @@
|
|||
*/
|
||||
|
||||
// definition of social icons:
|
||||
$social_icons = array(
|
||||
array(
|
||||
'icon' => "mdi-typewriter",
|
||||
'url' => '/blog',
|
||||
'prof' => false,
|
||||
'target' => "_self"
|
||||
),
|
||||
array('icon' => "mdi-rss", 'url' => '/feed', 'prof' => false, 'target' => "_blank"),
|
||||
array(
|
||||
'icon' => "mdi-linkedin",
|
||||
'url' => "https://www.linkedin.com/in/adampiontek/",
|
||||
'prof' => true,
|
||||
'target' => "_blank"
|
||||
),
|
||||
array('icon' => "mdi-github", 'url' => "https://github.com/apiontek", 'prof' => true, 'target' => "_blank"),
|
||||
array(
|
||||
'icon' => "mdi-key-variant",
|
||||
'url' => '/DF185CEE29A3D443_public_key.asc',
|
||||
'prof' => true,
|
||||
'target' => "_blank"
|
||||
),
|
||||
array(
|
||||
'icon' => "mdi-goodreads",
|
||||
'url' => "https://www.goodreads.com/user/show/2450014-adam-piontek",
|
||||
'prof' => false,
|
||||
'target' => "_blank"
|
||||
),
|
||||
array(
|
||||
'icon' => "mdi-twitter",
|
||||
'url' => "https://twitter.com/adampiontek",
|
||||
'prof' => false,
|
||||
'target' => "_blank"
|
||||
),
|
||||
array('icon' => "mdi-facebook", 'url' => "https://facebook.com/damek", 'prof' => false, 'target' => "_blank"),
|
||||
array(
|
||||
'icon' => "mdi-instagram",
|
||||
'url' => "https://www.instagram.com/adampiontek/",
|
||||
'prof' => false,
|
||||
'target' => "_blank"
|
||||
),
|
||||
array(
|
||||
'icon' => "mdi-steam",
|
||||
'url' => "https://steamcommunity.com/id/apiontek/",
|
||||
'prof' => false,
|
||||
'target' => "_blank"
|
||||
),
|
||||
array(
|
||||
'icon' => "mdi-discord",
|
||||
'url' => "https://discordapp.com/users/328583977629646848",
|
||||
'prof' => false,
|
||||
'target' => "_blank"
|
||||
)
|
||||
);
|
||||
// $social_icons = array(
|
||||
// array(
|
||||
// 'icon' => "mdi-typewriter",
|
||||
// 'url' => '/blog',
|
||||
// 'prof' => false,
|
||||
// 'target' => "_self"
|
||||
// ),
|
||||
// array('icon' => "mdi-rss", 'url' => '/feed', 'prof' => false, 'target' => "_blank"),
|
||||
// array(
|
||||
// 'icon' => "mdi-linkedin",
|
||||
// 'url' => "https://www.linkedin.com/in/adampiontek/",
|
||||
// 'prof' => true,
|
||||
// 'target' => "_blank"
|
||||
// ),
|
||||
// array('icon' => "mdi-github", 'url' => "https://github.com/apiontek", 'prof' => true, 'target' => "_blank"),
|
||||
// array(
|
||||
// 'icon' => "mdi-key-variant",
|
||||
// 'url' => '/DF185CEE29A3D443_public_key.asc',
|
||||
// 'prof' => true,
|
||||
// 'target' => "_blank"
|
||||
// ),
|
||||
// array(
|
||||
// 'icon' => "mdi-goodreads",
|
||||
// 'url' => "https://www.goodreads.com/user/show/2450014-adam-piontek",
|
||||
// 'prof' => false,
|
||||
// 'target' => "_blank"
|
||||
// ),
|
||||
// array(
|
||||
// 'icon' => "mdi-twitter",
|
||||
// 'url' => "https://twitter.com/adampiontek",
|
||||
// 'prof' => false,
|
||||
// 'target' => "_blank"
|
||||
// ),
|
||||
// array('icon' => "mdi-facebook", 'url' => "https://facebook.com/damek", 'prof' => false, 'target' => "_blank"),
|
||||
// array(
|
||||
// 'icon' => "mdi-instagram",
|
||||
// 'url' => "https://www.instagram.com/adampiontek/",
|
||||
// 'prof' => false,
|
||||
// 'target' => "_blank"
|
||||
// ),
|
||||
// array(
|
||||
// 'icon' => "mdi-steam",
|
||||
// 'url' => "https://steamcommunity.com/id/apiontek/",
|
||||
// 'prof' => false,
|
||||
// 'target' => "_blank"
|
||||
// ),
|
||||
// array(
|
||||
// 'icon' => "mdi-discord",
|
||||
// 'url' => "https://discordapp.com/users/328583977629646848",
|
||||
// 'prof' => false,
|
||||
// 'target' => "_blank"
|
||||
// )
|
||||
// );
|
||||
|
||||
function social_icon_is_prof($icon) {
|
||||
return $icon['prof'];
|
||||
}
|
||||
// function social_icon_is_prof($icon) {
|
||||
// return $icon['prof'];
|
||||
// }
|
||||
|
||||
function get_social_icons() {
|
||||
global $social_icons;
|
||||
return $social_icons;
|
||||
}
|
||||
// function get_social_icons() {
|
||||
// global $social_icons;
|
||||
// return $social_icons;
|
||||
// }
|
||||
|
||||
function get_social_icons_prof() {
|
||||
global $social_icons;
|
||||
return array_values(array_filter($social_icons, 'social_icon_is_prof'));
|
||||
}
|
||||
// function get_social_icons_prof() {
|
||||
// global $social_icons;
|
||||
// return array_values(array_filter($social_icons, 'social_icon_is_prof'));
|
||||
// }
|
||||
|
||||
function social_icons_str($icons_arr) {
|
||||
$out_str = '<div id="social-icons">';
|
||||
foreach ($icons_arr as $i=>$social) {
|
||||
$pad = $i == 0 ? 'pe-1' : ($i == (count($icons_arr) - 1) ? 'ps-1' : 'px-1');
|
||||
$out_str .= '<a href="' . $social['url'] . '" rel="noreferrer" target="' . $social['target'];
|
||||
$out_str .= '" class="fs-3 link-light text-decoration-none ' . $pad . '">';
|
||||
$out_str .= svg_icon_use($social['icon'], "baseline") . "</a>";
|
||||
}
|
||||
return $out_str . '</div>';
|
||||
}
|
||||
// function social_icons_str($icons_arr) {
|
||||
// $out_str = '<div id="social-icons">';
|
||||
// foreach ($icons_arr as $i=>$social) {
|
||||
// $pad = $i == 0 ? 'pe-1' : ($i == (count($icons_arr) - 1) ? 'ps-1' : 'px-1');
|
||||
// $out_str .= '<a href="' . $social['url'] . '" rel="noreferrer" target="' . $social['target'];
|
||||
// $out_str .= '" class="fs-3 link-light text-decoration-none ' . $pad . '">';
|
||||
// $out_str .= svg_icon_use($social['icon'], "baseline") . "</a>";
|
||||
// }
|
||||
// return $out_str . '</div>';
|
||||
// }
|
||||
|
||||
function get_social_icons_str() {
|
||||
return social_icons_str(get_social_icons());
|
||||
}
|
||||
// function get_social_icons_str() {
|
||||
// return social_icons_str(get_social_icons());
|
||||
// }
|
||||
|
||||
function get_social_icons_prof_str() {
|
||||
return social_icons_str(get_social_icons_prof());
|
||||
}
|
||||
// function get_social_icons_prof_str() {
|
||||
// return social_icons_str(get_social_icons_prof());
|
||||
// }
|
||||
|
||||
?>
|
||||
|
|
@ -50,47 +50,47 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
|
|||
return $atts;
|
||||
}, 2, 3 );
|
||||
|
||||
/**
|
||||
* Filter to add icons to navbar menu items
|
||||
*/
|
||||
add_filter( 'wp_nav_menu_objects', function($items, $args) {
|
||||
$svgicon_prefix = 'icon-';
|
||||
foreach ( $items as $k => $object ) {
|
||||
foreach ($object->classes as $c) {
|
||||
if (substr( $c, 0, strlen( $svgicon_prefix ) ) === $svgicon_prefix) {
|
||||
$icon_slug = str_replace($svgicon_prefix, '', $c);
|
||||
$object->title = svg_icon_use($icon_slug, 'baseline') . "\\" . $object->title;
|
||||
}
|
||||
}
|
||||
}
|
||||
return $items;
|
||||
}, 1, 2 );
|
||||
// /**
|
||||
// * Filter to add icons to navbar menu items
|
||||
// */
|
||||
// add_filter( 'wp_nav_menu_objects', function($items, $args) {
|
||||
// $svgicon_prefix = 'icon-';
|
||||
// foreach ( $items as $k => $object ) {
|
||||
// foreach ($object->classes as $c) {
|
||||
// if (substr( $c, 0, strlen( $svgicon_prefix ) ) === $svgicon_prefix) {
|
||||
// $icon_slug = str_replace($svgicon_prefix, '', $c);
|
||||
// $object->title = svg_icon_use($icon_slug, 'baseline') . "\\" . $object->title;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// return $items;
|
||||
// }, 1, 2 );
|
||||
|
||||
/**
|
||||
* Filter to remove syntax-highlighting-code-block plugin styles from frontend
|
||||
*/
|
||||
add_filter('syntax_highlighting_code_block_styling', '__return_false');
|
||||
// /**
|
||||
// * Filter to remove syntax-highlighting-code-block plugin styles from frontend
|
||||
// */
|
||||
// add_filter('syntax_highlighting_code_block_styling', '__return_false');
|
||||
|
||||
|
||||
/**
|
||||
* Set document title (in html head) to be reversed with '\' separator
|
||||
*/
|
||||
add_filter( 'document_title_separator', function ( $separator ) {
|
||||
return '\\';
|
||||
} );
|
||||
add_filter('document_title_parts', function ($title) {
|
||||
return (is_home() || is_front_page()) ? $title : array_reverse($title);
|
||||
});
|
||||
// /**
|
||||
// * Set document title (in html head) to be reversed with '\' separator
|
||||
// */
|
||||
// add_filter( 'document_title_separator', function ( $separator ) {
|
||||
// return '\\';
|
||||
// } );
|
||||
// add_filter('document_title_parts', function ($title) {
|
||||
// return (is_home() || is_front_page()) ? $title : array_reverse($title);
|
||||
// });
|
||||
|
||||
|
||||
/**
|
||||
* Exclude pages from WordPress Search
|
||||
*/
|
||||
if (!is_admin()) {
|
||||
add_filter('pre_get_posts',function($query) {
|
||||
if ($query->is_search) {
|
||||
$query->set('post_type', 'post');
|
||||
}
|
||||
return $query;
|
||||
});
|
||||
}
|
||||
// /**
|
||||
// * Exclude pages from WordPress Search
|
||||
// */
|
||||
// if (!is_admin()) {
|
||||
// add_filter('pre_get_posts',function($query) {
|
||||
// if ($query->is_search) {
|
||||
// $query->set('post_type', 'post');
|
||||
// }
|
||||
// return $query;
|
||||
// });
|
||||
// }
|
||||
|
|
|
|||
67
svgo.config.js
Normal file
67
svgo.config.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
module.exports = {
|
||||
multipass: false, // boolean. false by default
|
||||
plugins: [
|
||||
'cleanupAttrs',
|
||||
'mergeStyles',
|
||||
'inlineStyles',
|
||||
'removeDoctype',
|
||||
'removeXMLProcInst',
|
||||
'removeComments',
|
||||
'removeMetadata',
|
||||
'removeTitle',
|
||||
'removeDesc',
|
||||
'removeUselessDefs',
|
||||
'removeXMLNS',
|
||||
'removeEditorsNSData',
|
||||
'removeEmptyAttrs',
|
||||
'removeHiddenElems',
|
||||
'removeEmptyText',
|
||||
'removeEmptyContainers',
|
||||
'removeViewBox',
|
||||
'cleanupEnableBackground',
|
||||
'minifyStyles',
|
||||
// 'convertStyleToAttrs',
|
||||
'convertColors',
|
||||
'convertPathData',
|
||||
'convertTransform',
|
||||
'removeUnknownsAndDefaults',
|
||||
'removeNonInheritableGroupAttrs',
|
||||
'removeUselessStrokeAndFill',
|
||||
'removeUnusedNS',
|
||||
// 'prefixIds',
|
||||
'cleanupIDs',
|
||||
'cleanupNumericValues',
|
||||
// 'cleanupListOfValues',
|
||||
'moveElemsAttrsToGroup',
|
||||
'moveGroupAttrsToElems',
|
||||
'collapseGroups',
|
||||
// 'removeRasterImages',
|
||||
'mergePaths',
|
||||
'convertShapeToPath',
|
||||
'convertEllipseToCircle',
|
||||
'sortAttrs',
|
||||
'sortDefsChildren',
|
||||
// 'removeDimensions',
|
||||
// 'removeAttrs',
|
||||
{
|
||||
name: 'removeAttrs',
|
||||
params: {
|
||||
attrs: 'svg:id'
|
||||
}
|
||||
},
|
||||
// 'removeAttributesBySelector',
|
||||
// 'removeElementsByAttr',
|
||||
// 'addClassesToSVGElement',
|
||||
{
|
||||
name: 'addClassesToSVGElement',
|
||||
params: {
|
||||
className: '{{class-placeholder}}'
|
||||
}
|
||||
},
|
||||
// 'addAttributesToSVGElement',
|
||||
// 'removeOffCanvasPaths',
|
||||
'removeStyleElement',
|
||||
// 'removeScriptElement',
|
||||
// 'reusePaths',
|
||||
]
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ const glob = require("glob-all");
|
|||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
|
||||
// const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
|
||||
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
|
||||
const PurgecssPlugin = require("purgecss-webpack-plugin");
|
||||
|
||||
|
|
@ -50,28 +50,57 @@ const config = {
|
|||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: "svg-sprite-loader",
|
||||
options: {
|
||||
extract: true,
|
||||
spriteFilename: "icon-sprites.svg",
|
||||
publicPath: "./images/",
|
||||
symbolId: (filePath) => {
|
||||
if (filePath.includes("bootstrap-icons")) {
|
||||
return `bi-${path.basename(filePath).slice(0, -4)}`;
|
||||
} else if (filePath.includes("@mdi")) {
|
||||
return `mdi-${path.basename(filePath).slice(0, -4)}`;
|
||||
} else if (filePath.includes("heroicons")) {
|
||||
if (filePath.includes("outline")) {
|
||||
return `hio-${path.basename(filePath).slice(0, -4)}`;
|
||||
type: 'asset/resource',
|
||||
generator: {
|
||||
filename: (pathData) => {
|
||||
if (pathData.filename.includes('@mdi')) {
|
||||
return 'images/mdi-[name][ext]';
|
||||
} else if (pathData.filename.includes("bootstrap-icons")) {
|
||||
return 'images/bsi-[name][ext]';
|
||||
} else if (pathData.filename.includes("heroicons")) {
|
||||
if (pathData.filename.includes("outline")) {
|
||||
return 'images/hio-[name][ext]';
|
||||
} else {
|
||||
return `his-${path.basename(filePath).slice(0, -4)}`;
|
||||
return 'images/his-[name][ext]';
|
||||
}
|
||||
} else {
|
||||
return `${path.basename(filePath).slice(0, -4)}`;
|
||||
return 'images/svg-[name][ext]';
|
||||
}
|
||||
},
|
||||
},
|
||||
use: [
|
||||
{
|
||||
loader: 'svgo-loader',
|
||||
options: {
|
||||
configFile: path.resolve('svgo.config.js'),
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
// {
|
||||
// test: /\.svg$/,
|
||||
// loader: "svg-sprite-loader",
|
||||
// options: {
|
||||
// extract: true,
|
||||
// spriteFilename: "icon-sprites.svg",
|
||||
// publicPath: "./images/",
|
||||
// symbolId: (filePath) => {
|
||||
// if (filePath.includes("bootstrap-icons")) {
|
||||
// return `bi-${path.basename(filePath).slice(0, -4)}`;
|
||||
// } else if (filePath.includes("@mdi")) {
|
||||
// return `mdi-${path.basename(filePath).slice(0, -4)}`;
|
||||
// } else if (filePath.includes("heroicons")) {
|
||||
// if (filePath.includes("outline")) {
|
||||
// return `hio-${path.basename(filePath).slice(0, -4)}`;
|
||||
// } else {
|
||||
// return `his-${path.basename(filePath).slice(0, -4)}`;
|
||||
// }
|
||||
// } else {
|
||||
// return `${path.basename(filePath).slice(0, -4)}`;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
]
|
||||
},
|
||||
optimization: {
|
||||
|
|
@ -86,7 +115,7 @@ const config = {
|
|||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
|
||||
new SpriteLoaderPlugin({ plainSprite: true }),
|
||||
// new SpriteLoaderPlugin({ plainSprite: true }),
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [{
|
||||
from: './assets/images/',
|
||||
|
|
|
|||
Loading…
Reference in a new issue