-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
451 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # How to use inline SVG in components | ||
|
|
||
| In some cases, you might want use SVG icons in components. It is Possible. | ||
| For these cases, we have prepared `SvgExtension` with function `inlineSvg`. | ||
|
|
||
| In the project where the bundle is used, it is necessary to set in the configuration: | ||
|
|
||
| **config/packages/spirit_web_twig.yml** | ||
| ```yaml | ||
| spirit_web_twig: | ||
| ... | ||
| icons: # optional settings for svg assets | ||
| paths: | ||
| - "%kernel.project_dir%/assets/icons" # define paths for svg icons set | ||
| alias: 'jobs-icons' # default is 'icons-assets' | ||
| ``` | ||
| then it is possible to call in the component | ||
| ```twig | ||
| {{ inlineSvg('@icons-assets/iconName.svg', { class: ..., title: ... }) }} | ||
| ``` | ||
|
|
||
| if the icon does not exist, an empty string is returned and messages are sent to the symfony error logger. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,196 @@ | ||
| <?php | ||
|
|
||
| declare(strict_types=1); | ||
|
|
||
| namespace Lmc\SpiritWebTwigBundle\Twig; | ||
|
|
||
| use Psr\Log\LoggerInterface; | ||
| use SimpleXMLElement; | ||
| use Twig\Environment; | ||
| use Twig\Error\LoaderError; | ||
| use Twig\Extension\AbstractExtension; | ||
| use Twig\Source; | ||
| use Twig\TwigFunction; | ||
|
|
||
| class SvgExtension extends AbstractExtension | ||
| { | ||
| private const ALLOW_EXTENSION = '.svg'; | ||
|
|
||
| private const ATTR = 'attr'; | ||
|
|
||
| private const ATTR_CLASS = 'class'; | ||
|
|
||
| private const ATTR_TITLE = 'title'; | ||
|
|
||
| private const ATTR_ID = 'id'; | ||
|
|
||
| /** | ||
| * @var array<string,SimpleXMLElement|false> | ||
| */ | ||
| private array $cacheIcon = []; | ||
|
|
||
| /** | ||
| * @var array<string,string> | ||
| */ | ||
| private array $cacheReusableIconContent = []; | ||
|
|
||
| private const SIMPLE_XML_ROOT_DECLARATION = "<?xml version=\"1.0\"?>\n"; | ||
|
|
||
| private LoggerInterface $logger; | ||
|
|
||
| public function __construct(LoggerInterface $logger) | ||
| { | ||
| $this->logger = $logger; | ||
| } | ||
|
|
||
| public function getFunctions(): array | ||
| { | ||
| return [ | ||
| new TwigFunction('inlineSvg', [$this, 'getInlineSvg'], [ | ||
| 'needs_environment' => true, | ||
| 'is_safe' => ['html'], | ||
| ]), | ||
| ]; | ||
| } | ||
|
|
||
| /** | ||
| * @param SimpleXMLElement|false $svgElement | ||
| */ | ||
| private function replaceXmlDeclaration($svgElement): string | ||
| { | ||
| if ($svgElement instanceof SimpleXMLElement && $svgElement->asXML() !== false) { | ||
| return str_replace(self::SIMPLE_XML_ROOT_DECLARATION, '', $svgElement->asXML()); | ||
| } | ||
|
|
||
| return ''; | ||
| } | ||
|
|
||
| /** | ||
| * @param array<string, string|array<string>> $params | ||
| */ | ||
| public function getInlineSvg(Environment $environment, string $path, array $params = [], bool $reUsage = true, bool $ignoreMissing = false): string | ||
| { | ||
| $loader = $environment->getLoader(); | ||
| $twigSource = null; | ||
| $reusableSvg = null; | ||
|
|
||
| $ext = mb_substr($path, -4); | ||
| if ($ext !== self::ALLOW_EXTENSION) { | ||
| $path .= self::ALLOW_EXTENSION; | ||
| } | ||
|
|
||
| try { | ||
| $twigSource = $loader->getSourceContext($path); | ||
| } catch (LoaderError $e) { | ||
| if (! $ignoreMissing) { | ||
| $this->logger->critical('Missing svg "{path}"', [ | ||
| 'path' => $path, | ||
| ]); | ||
| return ''; | ||
| } | ||
| } | ||
|
|
||
| $iconId = md5($path . serialize($params)); | ||
|
|
||
| if (array_key_exists($iconId, $this->cacheReusableIconContent)) { | ||
| return $this->cacheReusableIconContent[$iconId]; | ||
| } | ||
|
|
||
| if (! $reUsage) { | ||
| $svgElement = $this->makeRegularSvg($twigSource, null, $params); | ||
|
|
||
| return $this->replaceXmlDeclaration($svgElement); | ||
| } | ||
|
|
||
| if (! array_key_exists($iconId, $this->cacheIcon)) { | ||
| $this->cacheIcon[$iconId] = $this->makeRegularSvg($twigSource, $iconId, $params); | ||
|
|
||
| return $this->cacheIcon[$iconId] !== false ? $this->replaceXmlDeclaration($this->cacheIcon[$iconId]) : ''; | ||
| } | ||
|
|
||
| if ($this->cacheIcon[$iconId]) { | ||
| $reusableSvg = $this->makeReusableSVG($iconId, $this->cacheIcon[$iconId]); | ||
| } | ||
|
|
||
| assert($reusableSvg instanceof SimpleXMLElement); | ||
|
|
||
| return $this->replaceXmlDeclaration($reusableSvg); | ||
| } | ||
|
|
||
| /** | ||
| * @param array<string, string|array<string>> $params | ||
| * @return false | SimpleXMLElement | ||
| */ | ||
| private function makeRegularSvg(?Source $source, ?string $iconId, array $params = []) | ||
| { | ||
| if (! $source instanceof Source) { | ||
| return false; | ||
| } | ||
|
|
||
| $svgString = $source->getCode(); | ||
|
|
||
| $hasClasses = array_key_exists(self::ATTR_CLASS, $params); | ||
| $hasTitle = array_key_exists(self::ATTR_TITLE, $params); | ||
| $hasAttributes = array_key_exists(self::ATTR, $params); | ||
|
|
||
| $svg = @simplexml_load_string($svgString); | ||
|
|
||
| if ($svg !== false) { | ||
| if ($iconId !== null) { | ||
| $this->replaceAttribute($svg, self::ATTR_ID, $iconId); | ||
| } | ||
|
|
||
| if ($hasClasses && is_string($params[self::ATTR_CLASS])) { | ||
| $this->replaceAttribute($svg, self::ATTR_CLASS, $params[self::ATTR_CLASS]); | ||
| } | ||
|
|
||
| if ($hasTitle && is_string($params[self::ATTR_TITLE]) && trim($params[self::ATTR_TITLE]) !== '') { | ||
| $svg->addChild(self::ATTR_TITLE, htmlspecialchars($params[self::ATTR_TITLE], ENT_QUOTES)); | ||
| } | ||
|
|
||
| if ($hasAttributes && is_array($params[self::ATTR])) { | ||
| foreach ($params[self::ATTR] as $key => $value) { | ||
| $this->replaceAttribute($svg, $key, $value); | ||
| } | ||
| } | ||
| } else { | ||
| $this->logger->error('Error parse svg by simplexml_load_string from {class} in path "{path}"', [ | ||
| 'class' => Source::class, | ||
| 'path' => $source->getPath(), | ||
| ]); | ||
| } | ||
|
|
||
| return $svg; | ||
| } | ||
|
|
||
| /** | ||
| * @return false|SimpleXMLElement | ||
| */ | ||
| private function makeReusableSVG(string $iconId, SimpleXMLElement $regularSvg) | ||
| { | ||
| $attributes = $regularSvg->attributes(); | ||
|
|
||
| $reuseSvg = simplexml_load_string('<svg></svg>'); | ||
|
|
||
| if ($attributes !== null && $reuseSvg instanceof SimpleXMLElement) { | ||
| foreach ($attributes as $key => $value) { | ||
| if ($key !== self::ATTR_ID) { | ||
| $reuseSvg->addAttribute((string) $key, (string) $value); | ||
| } else { | ||
| $reuseSvg->addChild('use')->addAttribute('href', '#' . $iconId); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return $reuseSvg; | ||
| } | ||
|
|
||
| private function replaceAttribute(SimpleXMLElement $simpleXmlElement, string $attributeName, string $value): void | ||
| { | ||
| if (isset($simpleXmlElement->attributes()[$attributeName])) { | ||
| $simpleXmlElement->attributes()[$attributeName] = $value; | ||
| } else { | ||
| $simpleXmlElement->addAttribute($attributeName, $value); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.